6.11JS学习随笔

Posted 2020-07-24

 

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

 

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