addEventListener() 和 onclick 的区别

前言：我们经常会看到有关addEventListener() 和 onclick 的区别的标题，其实跟addEventListener()同级对比的应该是on+事件名称，不过在addEventListener()第一个参数为click的时候，addEventListener和onclick则值得作比较，下面就从三个角度来说说它们的区别。

1. 用法

1.1 addEventListener( )

首先，addEventListener()是官方推荐的用于绑定事件的函数，以绑定"click"为例，它的用法如下：

const btn = document.querySelector("button");

function btnClick() {
    console.log("按钮被点击了");
}

btn.addEventListener("click", btnClick);

• 参数一：要监听的事件
• 参数二：执行函数，也可以为匿名函数，如下

btn.addEventListener("click", () => {
    console.log("按钮被点击了");
})

如果不想要监听了，还可以用removeEventListener移除监听器：

btn.removeEventListener("click", btnClick)

如果第二个参数是匿名函数，可以在定义事件的时候增加第三个参数：

const controller = new AbortController();

btn.addEventListener("click", () => {
    console.log("按钮被点击了");
  },
  { signal: controller.signal } // 向该处理器传递 AbortSignal
);

然后要删除的时候：

controller.abort();  // 移除任何/所有与该控制器相关的事件处理器

通过传递 { signal: controller.signal } 对象作为第三个参数，将 AbortSignal 传递给了这个事件监听器。如果在事件处理器执行期间调用了 controller.abort()，则addEventListener可以通过对 signal的判断来中止事件处理器中的操作。

1.2 onclick属性

而onclick作为事件处理器属性，使用的时候写法就不太一样：

btn.onclick = btnClick;

匿名函数写法：

btn.onclick = () => {
    console.log("按钮被点击了");
}

移除事件则直接设置为null：

btn.onclick = null;

其次，onclick还可以放到html标签里面，此时称为内联事件处理器：

<button onclick="btnClick()">我是一个孤独的按钮</button>

2. 灵活性

如果我们想要给同一个元素添加多个监听事件和执行函数，用addEventListener可以这样操作：

el.addEventListener("click", fun1);
el.addEventListener("click", fun2);

而onclick不能给一个元素添加多个执行函数，因为后面写的属性值总是会覆盖前面的：

el.onclick() = fun1;
el.onclick() = fun2;  // 只有最后一个生效了

3. 推荐性

• addEventListener是官方推荐的添加事件的用法，它能够添加多个事件，且只能写在js中，易于控制和修改。

• 用onclick容易造成覆盖问题，管理起来比较麻烦。

• 将onclick写在html标签中是不推荐的，它使得表现层（html）和行为层（js）混在了一起，不利于后期操作和维护，因此这种做法被认为是过时的、不好的，要尽量避免。