JavaScript 中 onclick 与 addEventListener 的区别详解

也就是 addEventListener 和 on 的区别

为什么需要 addEventListener？

先来看一个片段：

<div id ="box">测试</div>

用 on 的代码：

windwo.onload = function(){
  var box = document.getElementById("box");
  box.onclick = ()=>console.log("我是 box1");
  box.onclick = ()=>console.log("我是 box2");
}
// 运行结果 ： 我是 box2

可以看到，第二个 onclick 赋值会覆盖第一个 onclick 的绑定。虽然大多数场景下使用 on 属性即可完成需求，但有时需要执行多个相同类型的事件处理函数，此时使用 on 无法实现。而使用 addEventListener 可以实现对同一事件多次绑定，且不会覆盖之前绑定的事件。

用 addEventListener 的代码

window.onload = function(){
  var box = document.getElementById("box");
  box.addEventListener("click",()=>console.log("我是 box1"));
  box.addEventListener("click",()=>console.log("我是 box2"));
}
// 运行结果： 我是 box1
            //我是 box2

addEventListener 方法的第一个参数为事件名称，注意不需要添加前缀 on。第二个参数为处理函数。第三个参数用于指定事件处理的阶段，若为 true 表示在捕获阶段处理，若为 false 表示在冒泡阶段处理。该参数可选，多数情况下无需指定，省略时默认值为 false。

第三个参数的使用

有时会遇到如下场景：

<body>
  <div id = "box">
    <div id = "child"></div>
  </div>
</body>

假设给 box 元素绑定 click 事件。如果直接单击 box 本身，运行正常；但如果单击的是其子元素 child，事件是如何执行的？

box.addEventListener("click",()=>console.log("box"));
child.addEventListener("click",()=>console.log("child"));
// 执行结果：child -> box

默认情况下，事件按照冒泡顺序执行。

如果第三个参数设置为 true，则按照事件捕获的顺序执行。

总结

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

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

3. addEventListener 对于任何 dom 元素都是有效的，而 onclick 仅限于 html 元素

4. addEventListener 可以控制 listener 的触发阶段（捕获/冒泡）

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!