js事件和DOM事件流冒泡和捕获的作用区别和使用场景

事件是在特定情境下的发生，例如在用户与页面进行交互时，比如单击链接、移动鼠标、滚动页面等等。在 JavaScript 中，事件有两种常见类型：DOM 事件和非 DOM 事件。

DOM 事件是由 HTML 元素发出的事件，如单击一个按钮。而非 DOM 事件由浏览器本身发出，如窗口加载完毕或关闭。

DOM 事件流是从页面中的根节点开始，逐级向下钻取，直到到达事件目标元素。事件流的顺序分为两种：事件捕获和事件冒泡。

事件捕获：从根节点开始，逐级向下钻取，直到到达事件目标元素，途中捕获所有的事件。捕获阶段是从外层到内层依次执行。

事件冒泡：从事件目标元素开始，逐级向上冒泡，直到到达根节点。冒泡阶段是从内层到外层依次执行。

事件捕获和事件冒泡的作用区别：

事件捕获：一般用于在事件到达目标元素之前捕获它。比如，当用户单击一个链接时，我们可以在链接的父级元素上捕获这个事件，然后阻止它继续传播。事件捕获可以帮助我们拦截事件并在事件到达目标元素之前执行某些操作。但是，这种方式很少使用。

事件冒泡：一般用于在事件到达目标元素之后，将其向父级元素进行传播。比如，当用户单击一个按钮时，我们可以在按钮上注册一个单击事件，并在其触发时冒泡到更高层次的元素上。这种方式是最常见的事件处理方式。

使用场景：

1. 事件捕获：一般很少使用。
2. 事件冒泡：当我们想要在多个元素之间共享事件处理程序时，比如单击一个按钮时，我们可以在按钮和它的父级元素上注册同一个单击事件处理程序，这样可以避免在每个元素上单独注册事件处理程序。

DOM事件流是事件在DOM树结构中传播的方式，分为三个阶段：

1. 捕获阶段：从最顶层的父元素一直到目标元素，不涉及任何事件触发。
2. 目标阶段：事件触发的阶段。
3. 冒泡阶段：事件从目标元素一直传播到最顶层的父元素。

例如：

html部分：

<div id="outer">
  <div id="inner"></div>
</div>

js部分：

var outer = document.querySelector('#outer');
var inner = document.querySelector('#inner');

outer.addEventListener('click', function (event) {
  console.log('outer clicked');
}, false);

inner.addEventListener('click', function (event) {
  console.log('inner clicked');
}, false);

当我们在页面上点击inner元素时，事件流的顺序如下：

1. 从outer元素到inner元素的捕获阶段，但是代码没有绑定该阶段的事件。
2. 在inner元素上触发了click事件，进入目标阶段。
3. 从inner元素到outer元素的冒泡阶段，触发outer元素的click事件，打印“outer clicked”。

注意：事件的冒泡与捕获是根据事件绑定的顺序决定的。在上述代码中，我们通过第三个参数false指定事件在冒泡阶段触发，如果将其改为true，那么事件会在捕获阶段触发，输出顺序会相反。

这篇好文章是转载于：学新通技术网