最近在做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‘]);
其实就是为了是为了改变函数体内部 this 的指向。
5.dataset.city
HTML5自定义属性对象Dataset文章:http://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/
下面是元素应用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”就是为了找到了对应的城市属性名,然后再对该项进行删除操作。
真的感觉好厉害。。。自己写的话没什么思路,学习下大神的代码也是好滴。