onclick与addEventListener区别

大家好，又见面了，我是你们的朋友全栈君。

这次做项目遇到了这个问题，本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候，引发了我的思考，这两者有区别吗？具体的事件分析可查看另一篇文章

结论：

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

探究：

onclick添加事件：

element.onclick = functionRef;

functionRef是一个函数，通常是在别处声明的函数名，或者是一个函数表达式

onclick删除事件：

element.onclick = null;

DOM格式如上，javascript代码

运行结果：

可想而知，只会弹出一个弹出框，虽然绑定了两次，‘我是click2’

一个click处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次，但是仍然只会出现最后的一次绑定。

addEventlistener绑定click事件：

currentTarget.addEventListener(type, listener, option)

同样上面的DOM结构，对应的javascript代码:

运行结果：

两次绑定的事件，都能够成功运行，也就是前后弹出 ‘我是addEvent1’ ‘我是addEvent2’

由此可知，对于一个可以绑定的事件对象，想多次绑定事件都能运行，选用addEventListener

通过addEventListener添加的事件必须通过相对应的为removeListener注销事件。但是如果像上面的用匿名函数的方式注册的事件，不能使用removeListener注销，因为没用对应事件的引用。

所以注册事件如果需要取消，最好使用一个引用，即：

var eventName = function () {
    //something
};

也正是这种方式，对于一个对象多次绑定同样的eventName，那么不会重复执行，只会执行一次。对于上面的匿名函数，就算内容一样，也会依次执行，因为并不能算是相同事件处理器。

里面的this引用，不是window对象，而是触发事件的元素的引用。

对于IE9之前，相对应的是attachEvent和detachEvent

总结：

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

参考文献：

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener