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清除。

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

猜你喜欢

转载自blog.csdn.net/shidouyu/article/details/122431780