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：可选项，将被传递方法参数序列。

在知乎看到的一个回答：

function changeStyle(attr, value){
    this.style[attr] = value;
}
var box = document.getElementById(‘box‘);
window.changeStyle.call(box, "height", "200px");

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‘);

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”就是为了找到了对应的城市属性名，然后再对该项进行删除操作。

真的感觉好厉害。。。自己写的话没什么思路，学习下大神的代码也是好滴。

6.11JS学习随笔

标签：

原文地址：http://www.cnblogs.com/spezz07/p/5575775.html