addEventListener与onclick的区别

Posted 2021-06-11 浣熊sky

 

 

1.addEventListener可以对同一个元素绑定多个事件，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件，如有多个，后面的事件会覆盖前面的事件。

document.getElementById("myDIV").addEventListener("click", function() {
  alert(1)
});
document.getElementById("myDIV").addEventListener("click", function() {
  alert(2)
});
//以上代码会先弹出1，在弹出2
document.getElementById("myDIV").onclick = function () {
  alert(1)
};
document.getElementById("myDIV").onclick = function () {
  alert(2)
};
//以上代码只会弹出1。

2.addEventListener的第三个参数为布尔类型，默认为false，也就是执行的冒泡机制，如为true，则执行捕获机制(可精细的控制事件的监听触发阶段)。

3.addEventListener它对任何 DOM 元素都是有效的，而不仅仅只对 html 元素有效。（核心dom,htmldom, xmldom）

4.注册addEventListener事件时不需要写on，而onclick方式则必须加on。

document.getElementById("myDIV").addEventListener("click", myFunction);
document.getElementById("myDIV").onclick = myFunction;

5.在移除事件上，onclick使用的是指针指向null，例如document.onclick = null，而addEventListener则使用的是独有的移除方法

removeListener（要使用此方法，addEventListener必须执行的是外部函数或存在函数名，不然则不能使用）

例如：

// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

//如是以下类型的代码，则不能使用removeEventListener
document.getElementById("myDIV").addEventListener("mousemove", function() {});

6.addEventListener为DOM2级事件绑定，onclick为DOM0级事件绑定。

7.IE678只能使用attachEvent，无addEventListener。

addEventListener传递参数使用 匿名函数