DOM节点事件完全指南：从事件冒泡到事件委托的实践

你有没有遇到过这种情况：明明给一个按钮绑定了 click 事件，结果点了半天没反应；或者弹窗里的按钮，开一次页面就多触发一次，最后点一下要响应好几遍。我在维护老项目的时候，这类问题见过太多次，绝大多数都是 JavaScript 操作 DOM 节点事件时的一些基础细节没处理好。换句话说，只要把事件绑定、事件流、事件对象、事件委托这几个东西彻底理解透，这些问题基本都能一眼定位。这篇文章就把 DOM 节点事件相关的内容从头到尾讲一遍，也把我平时排查事件问题的那套思路分享出来，很适合刚入门 Web 前端、或者经常被各种事件问题折腾的同学参考。

1. 先把事件机制看透：一次点击背后的完整链路

1.1 事件不是魔法，而是一套广播协议

很多人写事件的时候，脑子里想的是“我点了这个按钮，所以这个按钮的函数要执行”。这个直觉没有错，但它忽略了一个关键角色——浏览器。

浏览器在用户点击、键盘输入、滚动、鼠标移动的时候，会偷偷生成一个事件对象，这个对象里装满了现场信息：事件类型是 click 还是 keydown、触发目标的坐标、按下的按键、事件发生的时间戳等等。然后浏览器会把这个事件对象当作一个“广播信号”，扔进 DOM 节点组成的这棵大树里。树上的每一个节点都有机会听到这个广播，并且决定是自己处理、还是转发出去。

这套机制的好处在于：你不必专门给每个节点建立一条消息通道，只要把监听器挂到节点上，事件在传播过程中经过该节点时就能被捕获。这就是事件系统的底层逻辑，也是后面所有技巧的出发点。理解了“广播”这个概念，你就知道为什么事件委托是可行的，为什么一个父级节点能监听到所有子节点的事件。

1.2 捕获、目标、冒泡：事件流的三个阶段

事件从浏览器窗口进入 DOM 树，再到树上某个具体的目标节点，最后再离开，这一整套路径被浏览器划分成了三个阶段：捕获阶段、目标阶段、冒泡阶段。

捕获阶段是从 window 对象出发，沿着 DOM 树的父节点，一层一层往下走，直到抵达事件真正发生的那个元素。如果沿途某个节点在这个阶段绑定了监听器，并且你把监听器的捕获参数打开，它就会在这个阶段触发。之后事件到达目标节点，进入目标阶段，这是事件命中的那个元素本身处理事件的时机。再然后事件开始往回走，从目标节点一层一层往上冒，直到 window，这个阶段叫冒泡阶段。默认情况下，我们用 addEventListener 绑定的监听器都是在这个阶段触发的。

为什么要搞这么复杂？举个常见场景：一个表格里有 100 个按钮，如果分别给每个按钮绑定事件，那要绑定 100 次。但如果利用冒泡，在表格那一层绑定一次，事件从按钮冒泡到表格的过程中，表格就能感知到。这个机制极大简化了动态内容的事件处理，也是后面事件委托的根基。只不过代价是你必须理解事件流的走向，否则很容易出现“事情被莫名其妙触发”的幻觉。

1.3 目标是谁：元素、document、window，还是文本节点

事件流的整体路径是固定的，但每一层上的“目标”需要区分清楚。最简单的情况，点击一个 <button>，目标就是那个 button 元素。但事件也可以被绑定在 document 和 window 上，它们虽然不在常规 DOM 树上，也被纳入了事件路径中。常见的全局快捷键监听，就会把监听器挂在 document 上；想要监听浏览器窗口的 resize，就必须挂在 window 上。

还有一类非常容易踩坑的属性差异：event.target 是事件真正发生的那个节点，而 event.currentTarget 是当前正在处理事件的节点。我在给 ul 绑定事件时，点击里面的 li，target 是 li，currentTarget 是 ul。如果这个差异没搞清楚，很容易出现取节点属性取错的情况，尤其是涉及到事件委托的时候。另外要提一句，事件对象里的 target 有可能是文本节点而不是元素节点，比如用户点在了某个文字上，这时候想调一下 target.classList 就会报错，比较稳妥的做法是先用 closest 之类的接口去向上找元素节点。这个问题我在后面事件委托部分还会细说。

2. 绑定事件：三种写法的差异与 addEventListener 为什么成为主流

2.1 从 onclick 到 addEventListener：一个“覆盖”问题引发的血案

早年间给 DOM 节点绑定事件，最直观的写法就是给节点的事件属性直接赋值：

js复制const btn = document.getElementById('submitBtn')
btn.onclick = function() {
  console.log('第一次绑定')
}
btn.onclick = function() {
  console.log('第二次绑定')
}

这段代码执行后，点击按钮只会打印“第二次绑定”，因为 onclick 本质上就是一个属性，赋值两次，后面的覆盖了前面的。这个机制在简单场景下没问题，但项目稍微复杂一点，比如引入不同模块，大家都想给同一个按钮挂点击逻辑，这种方式就非常坑。你根本不知道自己的绑定是不是被谁覆盖了，也不知道自己是不是覆盖了别人的逻辑。

所以现代开发里，我一直推荐用 addEventListener。它最核心的价值有两个：一是同一个元素的同一个事件可以绑定多个监听器，它们会按照注册顺序依次触发；二是