前言：我们经常会看到有关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）混在了一起，不利于后期操作和维护，因此这种做法被认为是过时的、不好的，要尽量避免。