addEventListener与onclick的覆盖关系及执行逻辑疑问

嘿，我来给你把这几个写法的区别和执行逻辑讲得明明白白，你贴的这段代码刚好能把问题说透～

先把你的代码完整放出来方便对照：

<button id="button" onclick="console.log('inline click')">Why not click and find out?</button>

<script>
const button = document.getElementById('button')
button.onclick = function() { console.log('onclick'); } // overwrites the inline handlers
button.addEventListener('click', function() { console.log('listener'); }); // adds to the event handlers
</script>

咱们逐个拆解细节：

• HTML内嵌的inline onclick：这是早期DOM0级事件的写法，直接把处理逻辑嵌在标签里。但它有个关键局限——当你通过JS给元素的onclick属性赋值新函数时，这个inline的处理逻辑会被直接覆盖掉，因为onclick本质是元素的单个属性，一个属性只能存一个函数引用，新值会直接替换旧值。
• button.onclick = function() {...}：同样属于DOM0级事件模型，它的作用就是给元素的click事件绑定处理函数，正如代码注释里说的，这一步会把之前inline的onclick逻辑完全覆盖，所以原来的console.log('inline click')就不会再执行了。
• addEventListener('click', ...)：这是DOM2级事件模型的标准方法，核心特点是不会覆盖任何已有的事件处理函数，而是给同一个click事件追加一个新的监听函数到事件队列里。也就是说，不管你之前用onclick绑定了多少（其实只能一个），addEventListener都能再加新的，点击时会按绑定顺序依次执行。

那点击按钮后实际会发生什么呢？控制台会依次输出：

onclick
listener

而inline click不会出现，因为已经被button.onclick的赋值操作覆盖了。

最后给你划个核心区别：

• DOM0级的onclick（不管是inline还是JS属性赋值）：同一事件类型只能绑定一个处理函数，新绑定会直接覆盖旧的。
• DOM2级的addEventListener：同一事件类型可以绑定N个处理函数，按绑定顺序执行，还能通过第三个参数指定在捕获/冒泡阶段触发，功能灵活度高很多。

内容来源于stack exchange