DOM 事件流

事件流

“DOM2级事件”规定的事件流包括三个阶段:

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
事件冒泡指事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。

event_flow.png-69.4kB
来源:W3C
以上图的 HTML 页面为例,单击 <td> 会按照上图所示顺序触发事件。

事件委托

事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

1
2
3
4
5
<ul>
<li>TODO 1</li>
<li>TODO 2</li>
<li>TODO 3</li>
</ui>

以上面的 HTML 代码为例,按照传统的做法,若要使每个列表项单击后执行相关操作,则需要分别为它们各自添加 click 事件,共 3 个事件。若后续增加了更多的列表项,还需额外为它们添加相应的事件。
而使用事件委托,则只需在 <ul> 上添加 click 事件即可。由于所有列表项都是这个元素的子节点,而且它们的事件会冒泡,所以单击事件最终会被 <ul> 的事件处理。与前面的传统做法相比,事件委托占用的内存更小且更为便捷。

参考

  • JavaScript 高级程序设计 第 13 章