onClick 和 addEventListener 比较

JS事件绑定（addEventListener）和普通事件（onclick）有什么区别
普通事件（onclick）
普通事件就是直接触发事件，同一时间只能指向唯一对象，所以会被覆盖掉。代码如下：

var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("你好111");
}
btn.onclick = function(){
    alert("你好222");
}
1
2
3
4
5
6
7
输出的结果只会有<你好222>，一个click处理器在同一时间只能指向唯一的对象。所以就算一个对象绑定了多次，其结果只会出现最后的一次绑定的对象。

事件绑定（addEventListener）
事件绑定就是对于一个可以绑定的事件对象，进行多次绑定事件都能运行。代码如下：

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    alert("你好111");
},false);
btn.addEventListener("click",function(){
    alert("你好222");
},false);
1
2
3
4
5
6
7
运行结果会依次弹出你好111，你好222的弹出框。

友情提示（了解即可）
ie9 以前：使用attachEvent/detachEvent进行绑定
进行事件类型传参需要带上 on 前缀
这种方式只支持事件冒泡，不支持事件捕获
ie9 开始：使用addEventListener进行绑定
二者区别
addEventListener对任何DOM都是有效的，而onclick仅限于HTML

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

总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件