浏览器 DOM 元素的事件代理指的是什么

事件

在网页中，如果想与使用者进行“互动”，必须要通过某种方法知道他都做了什么。当然，浏览器开发者们早已根据W3C 事件规范[1]实现好了底层的逻辑，我们只需要通过 Web API 中的DOM Event[2]，通过注册想监听的 DOM 元素和事件的事件监听器（Event Listener）就可以轻松掌握使用者在网页上的一举一动。

事件监听

我们可以在想要监听事件的 DOM 元素上通过  addEventListener[3]注册监听器。例如：

当点击 元素时会触发 并传入一个事件，其内容包含事件传递过程中必要的数据，例如目标元素、当前元素、传递阶段等等。这时我们便可以从中获取所需要的数据，并针对这些数据做你想做的事。

现在的网站有大量的互动，如果通过事件监听一个一个去写，除了效能很差，写起来也很麻烦；这时就体现出“事件代理”的重要性了！

不过在说到事件代理之前，现需要理解 DOM Tree 上的时间传递机制是怎样的

时间传递

可以参考 W3C 所定义的 Event Flow 图：

规范中定义了时间传递的三个阶段：

捕获阶段：由 DOM Tree 的根节点依次向内传递，过程中触发各别元素的捕获阶段事件监听。

目标阶段：到达事件目标（Event Target），按照注册顺序触发事件监听[4]。

冒泡阶段：由事件目标依序向外传递，过程中触发各别元素的冒泡阶段事件监听。

如图所示，当使用者触发一个DOM 元素的事件时，首先会进入捕获阶段（Capture Phase），从根结点逐步向事件目标传递；到达目标后则进入目标阶段（Target Phase），接着就开始折返，进入向根结点传递的冒泡阶段（Bubbling Phase）。

在使用 注册事件监听器时，可以通过传递第三个参数，指定此事件监听要在什么阶段触发：

通过简单的来回传递，这样就能更精准的控制触发的时机了！

事件代理

现在终于聊到了事件代理。由于事件传递的机制，子元素的事件在传递过程中势必会经过它的父元素；而事件代理，顾名思义就是将子元素事件监听器交由父元素代理。

什么意思呢？我们直接看个简单的对照例子：

首先是 HTML 骨架：

没有事件代理

有事件代理

差异在于事件监听的目标元素

在没有事件代理的版本中每一个 上都注册了事件监听器，当数量越来越多时浏览器也就建立了越来越多的监听器，无形中对性能有很大的影响；反之在有事件代理的版本中，将事件监听器注册在了外层的 上，无论内容有多少，浏览器都只需要承担一组事件监听器的消耗。

库和框架中的事件处理

在 DOM 事件处理的这部分，jQuery 和 Vue 都将原生的事件监听器做了封装，方便我们快速设定、使用，甚至会自动帮你移除无用的事件监听。

但是在 React 中，React DOM 上直接注册的事件监听器，其实监听的是 React 额外封装过的 React DOM Event，并将全部事件代理到 document 上，这与原生事件有很大不同；特别是如果混用 React DOM Even tListener 及原生的 ，事件监听器之间的执行顺序很有可能会和预期不一致，在写 React 的时候要特别注意。

有兴趣深入研究的话可以在**React 源码**[5]中查找关于事件处理的代码部分。

Reference

[1]

W3C 事件规范:

https://www.w3.org/TR/uievents/[2]

DOM Event:

https://developer.mozilla.org/zh-CN/docs/Web/API/Event[3]

addEventListener:

https://developer.mozilla.org/zh-TW/docs/Web/API/EventTarget/addEventListener[4]

按照注册顺序触发事件监听:

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener[5]

React 源码:

https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMClientInjection.js#L26