事件绑定之小测试 onclick addEventListener(2)

Chrome 中的 Event Listeners 是一个不错的小工具，直接罗列出当前选中元素上面已经被绑定的监听函数，点击小黑三角可以查看绑定函数的信息：

click 中有两项，第一项是 div#test1，这个就是我们绑定的 onclick 函数信息；第二项的 document 可以不去看（Chrome 自身的处理）；

isAttribute: true ：说明此 onclick 函数句柄是作为元素属性来对待的（因为我们用的是 onclick = function(){…}，不管是 test1 还是 test2）;

lineNumber: 18 ：说明绑定函数的位置；

useCapture: false : 说明不使用事件捕获；其他的语义性很强，就不说了；

同样，在 Properties 的第一个 HTMLDivElement 列表中，test1 和 test2 中都能看到：

2，选中 test3：

在 Properties 中 onclick 和 onmouseover 都会变成 null，但是 Event Listeners 仍旧是：

但是注意这里的 div#test3:

isAttribute 变成了 false，因为我们没有使用 onclick 属性，而是用的 addEventListener。

先记这些吧！写得有点乱~

您可能感兴趣的文章: