DOM 事件流、事件委托

定义

• DOM (文档对象模型)结构是一个树型结构，当一个 HTML 元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为 DOM 事件流。

• 传播按顺序分为三个阶段：捕获阶段、目标阶段、冒泡阶段

传播过程

捕获阶段

• 事件的处理将从 DOM 层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了 useCapture 属性为 true (默认为 falsy 值): element.addEventListener(eventType, fn, useCapture)那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。

当前目标阶段

• 事件到达目标元素后，进入当前目标阶段，执行函数代码，之后它会接着通过 DOM 节点再进行冒泡。

冒泡阶段

• 当事件在某一 DOM 元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的 DOM 节点层次，直到它遇到依附有该事件类型处理器的节点。在冒泡过程中的任何时候都可以终止事件的冒泡(调用事件的 stopPropagation 方法)，如果不停止事件的传播，事件将一直通过 DOM 冒泡直至到达文档根。

特殊事件

• 有些 DOM 事件是没有冒泡的，比如：blur、focus、mouseenter、mouseleave
• scroll (滚动事件),浏览器禁止终止该事件冒泡。

立刻停止传播

event.stopImmediatePropagation();

• 如果目标阶段的节点绑定了多个事件，它们不会区分捕获和冒泡，事件触发的顺序为代码执行的顺序。而且 event.stopPropagation()在目标阶段不会生效。如果目标阶段有 a、b、c 三个触发事件会按注册顺序执行，在 b 事件里设置 event.stopPropagation()并不会影响 c 事件的触发。 但是如果在 b 事件里设置 event.stopImmediatePropagation()后 ，事件触发到 b 之后就会停止触发后面的所有事件。

事件委托

事件委托的原理

• 事件委托也叫事件委派，就是利用 DOM 的冒泡事件流，注册最少的监听器，实现对 DOM 节点的所有子元素进行事件群控。

为什么要使用事件委托

• 一般来讲，如果一个元素需要注册事件，那我们会直接为此元素注册事件处理程序。那如果有更多的元素，比如一百个，甚至更多；比如我们需要为一百个 li 元素注册想同的点击事件，那就要用循环遍历，注册一百个事件处理程序。在 JS 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与 DOM 节点进行交互，访问 DOM 的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间；同时，对象越多，内容占用就越大。如果要用事件委托，就会将所有的操作放到 JS 程序里面，与 DOM 的操作就只需要交互一次，从而提高性能。