CodeWalk

addEventListener 和 onclick 的区别是什么？

作者：苦行僧 · 2026-05-30 12:55

请对比 addEventListener 和直接使用 onclick 属性绑定事件的方式在功能上的区别。

回答

苦行僧

1. 事件绑定数量

  • onclick：只能绑定一个处理函数，后绑定的会覆盖前面的
  • addEventListener：可以绑定多个处理函数，按注册顺序依次执行

2. 移除事件

  • onclick：elem.onclick = null
  • addEventListener：elem.removeEventListener(type, handler, options) — 需传入相同函数引用

3. 事件捕获支持

  • onclick：只能在冒泡阶段触发
  • addEventListener：第三个参数 { capture: true } 可在捕获阶段触发

4. 移除能力

  • onclick 简单但无法移除匿名函数
  • addEventListener 注册的命名函数可精确移除

5. 默认行为

  • 两者都可以通过 event.preventDefault() 阻止默认行为

6. once 选项

  • addEventListener 支持 { once: true } 自动执行一次后解绑

总结：推荐使用 addEventListener，更灵活、更规范。onclick 适合快速调试。