两种常用事件注册方式的核心差异
绑定模型的根本差异
在理解事件注册时，绑定模型的差异是最直观的要点。addEventListener 可以在同一个元素上为同一事件绑定多条独立的回调，每条回调都是一个独立的监听器，互不干扰，而 onclick 只维护一个事件处理函数，后设置的处理函数会覆盖先前的绑定。这个特性直接影响到你在同一元素上组合功能的能力。并行处理能力与单点覆盖之间的对比，是导致两者行为不同的关键。
对于动态添加和移除，addEventListener 提供了 removeEventListener API，可以在任意时刻按名称和参数移除指定的监听器。相比之下，使用 onclick 时只能通过将属性设为 null/undefined 或移除 HTML 内联处理器来“撤销”，这在大型应用中容易产生维护成本。灵活性是 addEventListener 的显著优势。
// addEventListener 的示例：可绑定多条监听器
document.getElementById('btn').addEventListener('click', function(){ console.log('Listener 1'); });
document.getElementById('btn').addEventListener('click', function(){ console.log('Listener 2'); });// onclick 的示例：只能绑定单一处理程序，后绑定者覆盖前者
document.getElementById('btn').onclick = function(){ console.log('Single handler'); };
事件流与执行顺序
另一个显著差异来自于事件流的执行顺序。addEventListener 可以通过第三个参数或选项对象指定捕获阶段（capture），从而在冒泡之前就被触发。若省略，监听器默认在冒泡阶段执行。捕获阶段的引入让你能够在事件沿着 DOM 由顶端向下传播时就拦截或处理事件。
相比之下，onclick 只能在冒泡阶段触发，且没有办法在同一个绑定点选择捕获。这意味着在复杂嵌套结构中，传播路径会导致不同的执行顺序，除非显式阻止传播。传播阶段的区分直接决定了事件最终到达的处理函数集合。
// 捕获与冒泡的对比示例（简化）
document.querySelector('.outer').addEventListener('click', () => {console.log('outer capture');
}, { capture: true });document.querySelector('#btn').addEventListener('click', () => {console.log('button bubble');
}, { capture: false });/*
输出日志示例：
outer capture
button bubble
*/
addEventListener 的工作原理与典型用法
允许多监听器与动态解绑
addEventListener 允许为同一事件绑定多条监听器，彼此独立，执行顺序通常按绑定顺序来决定。动态解绑 通过 removeEventListener 实现，能够在运行时按条件移除特定的监听器，提升模块化和可维护性。
在大型应用里，这种能力意味着你可以将不同功能模块的事件处理逻辑分离，而不会互相干扰。若一个模块需要停用某个行为，只需移除对应的监听器即可，而不需要改动其他代码。
const btn = document.getElementById('btn');
function first() { console.log('first'); }
function second() { console.log('second'); }btn.addEventListener('click', first);
btn.addEventListener('click', second);// 动态条件下移除其中一个监听器
btn.removeEventListener('click', first);
捕获与冒泡的控制权
通过第三个参数可以控制监听触发的阶段。capture 为 true 时，回调在捕获阶段触发；为 false 或未设置时，在冒泡阶段触发。阶段控制 让你在复杂的界面中对事件传播进行精细管理。
这也意味着同一个元素上，使用不同阶段注册的监听器可能会产生不同的触发顺序，尤其在嵌套结构中尤为明显。
document.getElementById('outer').addEventListener('click', function() {console.log('outer capture');
}, { capture: true });document.getElementById('outer').addEventListener('click', function() {console.log('outer bubble');
}, { capture: false });
onclick 的工作方式与限制
单一处理程序与覆盖式绑定
onclick 是将一个函数绑定到元素的 onxxx 属性上；同一时间只能维护一个处理函数，后设置的将覆盖前一个。这种“单点绑定、覆盖式更新”的模式在组件化程度不高的场景下工作简单，但在需要组合多个行为时往往难以扩展。 覆盖问题 是其核心局限之一。
当你将事件处理分散到不同位置或动态分配时，冲突与覆盖 的风险会显著增加，维护成本也会随之上升。
const btn = document.getElementById('btn');
btn.onclick = function() { console.log('first'); };
btn.onclick = function() { console.log('second'); }; // 覆盖前一个处理器
对事件默认行为的影响
return false 在早期浏览器中被广泛用来阻止默认行为，但现代标准推荐使用 event.preventDefault()，因为 onclick 的返回值对阻止默认行为并非跨浏览器一致。理解这一点对实现可靠的交互尤为重要。
同样地，stopPropagation() 和 stopImmediatePropagation() 需要在回调中显式调用来控制传播与执行的顺序，适用场景要谨慎。
document.getElementById('link').onclick = function(e) {e.preventDefault(); // 阻止默认行为，如跳转// 其它逻辑...
};
两种方法在同一元素上的对比演示
简单并发输出的对比
当一个按钮同时注册了多个 addEventListener 回调以及一个 onclick 处理时，输出的顺序由绑定顺序、是否捕获、以及是否冒泡共同决定。日志顺序 可以用来直观验证行为差异。
在实际页面中，这种差异常常导致意料之外的交互结果，因此理解它们的触发时机非常关键。
const btn = document.getElementById('btn');
btn.addEventListener('click', () => { console.log('A'); });
btn.addEventListener('click', () => { console.log('B'); });
btn.onclick = () => { console.log('C'); }; // 覆盖前一个 onclick
嵌套结构中的传播行为演示
在一个包含内部按钮的容器中，内外元素都绑定事件时，传播轨迹会决定哪些处理程序先执行。若使用 capture，外部会先触发，若仅使用 bubble，则内部先触发。理解 传播路径 对设计直观的交互尤为重要。
通过 stopPropagation 可以在符合条件的时刻切断传播，但这需要结合具体的 DOM 结构与交互需求来使用。
document.querySelector('.outer').addEventListener('click', () => {console.log('outer captured');
}, { capture: true });document.querySelector('.inner').addEventListener('click', () => {console.log('inner bubbling');
});// HTML 结构：
