6.11JS学习随笔
最近在做ife2016的task16习题，在最后那个每个btn按钮绑定删除事件，触发delBtnHandle函数，看到一个处理方式是：document.getElementById("aqi-table").addEventListener("click", function(event){if(event.target.nodeName.toLowerCase() === 'button') delBtnHandle.call(null, event.target.dataset.city);}
看不懂，然而就是查找资料。
1.首先是addEventListener；
element.addEventListener(event, function, useCapture)
event(必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
function（必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。）
useCapture（可选。布尔值，指定事件是否在捕获或冒泡阶段执行。默认false）
2、funciton(event)
将even（事件）作为参数，就是这个“点击”事件，通过这个even，可以获取到event.target，就是点击的对象等等属性。在这里的话就是代表click点击事件；
3、event.target.nodeName
target 事件属性可返回事件的目标节点（触发该事件的节点），这里是意思就是触发点击事件的节点的名称（event.target 属性在实现事件代理时才会被用到）；
nodeName：如果节点是元素节点，则 nodeName 属性返回标签名。如果节点是属性节点，则 nodeName 属性返回属性的名称。
4、
delBtnHandle.call
fun.call(thisArg,arg1, arg2, …)
call()作用都是改变当前作用域，即改变this的指向，将函数对象从初始的上下文改变为由thisArg指定的新对象。thisArg：可选项，将被当做当前对象。如果没有thisArg，那么global对象将被用作thisArg.arg1,arg2：可选项，将被传递方法参数序列。
在知乎看到的一个回答：
call和apply可以用来重新定义函数的执行环境，也就是this的指向。通过一个操作DOM的例子来理解。
function changeStyle(attr, value){
this.style[attr] = value;
}
var box = document.getElementById('box');
window.changeStyle.call(box, "height", "200px");
call中的第一个参数用于指定将要调用此函数的对象，在这里，changeStyle函数将被box对象调用，this指向了box对象，如果不用call的话，程序报错，因为window对象中没有style属性。
apply的用法:
window.changeStyle.apply(box, ['height', '200px']);
下面是元素应用data属性的一个例子：
<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
要想获取某个属性的值，可以像下面这样使用dataset对象：
var expenseday2 = document.getElementById('day2-meal-expense');
var typeOfDrink = expenseday2.dataset.drink;
如果使用传统的方法获取属性值应该会类似下面：
var typeOfDrink = document.getElementById('day2-meal-expense').getAttribute('data-drink');
现在，假设我们要获得多个自定义的属性值，得，折腾的事情就来了，我们可能要采用类似下面的N行代码实现了：
var attrs = expenseday2.attributes,
expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
if(attrs[i].name.substring(0, 5) == 'data-') {
expense[attrs[i].name.substring(5)] = attrs[i].value;
}
}
而使用dataset属性，我们根本不需要任何循环去获取你想要的那个值，直接秒杀：
expense = document.getElementById('day2-meal-expense').dataset;
首先在删除按钮BUTTON那里设置data-city属性为“cityName”（在这里的话是数组的对象名称即城市名）；
然后在点击按钮时候“dataset.city”就是为了找到了对应的城市属性名，然后再对该项进行删除操作。
真的感觉好厉害。。。自己写的话没什么思路，学习下大神的代码也是好滴。
