带你彻底搞懂JavaScript的事件流

JavaScript的事件流是指浏览器中各个元素接收事件的顺序。该过程包含了三个阶段：捕获阶段、目标阶段和冒泡阶段。在理解了JavaScript的事件流后，可以更加深入地理解JavaScript的DOM操作和事件处理。

捕获阶段

在捕获阶段，事件从文档的根节点向下传递，直到达到事件的目标元素。在这个过程中，任何一个被点击的元素都会在捕获的过程中被触发相应的事件。

捕获阶段示例代码：

document.addEventListener('click', function() {
  console.log('document capture');
}, true);

document.querySelector('.container').addEventListener('click', function() {
  console.log('container capture');
}, true);

document.querySelector('.box').addEventListener('click', function() {
  console.log('box capture');
}, true);

如上所示，我们在文档的根节点、.container元素和.box元素上都绑定了click事件。在这个例子中，我们将useCapture设置为true，表示事件的捕获阶段。当我们在.box元素上点击时，控制台会输出以下内容：

document capture
container capture
box capture

这说明事件会从上至下依次触发，先触发捕获阶段的事件处理函数，再触发目标阶段和冒泡阶段的事件处理函数。

目标阶段

在目标阶段，事件到达了其目标元素，并且触发了相应的事件处理函数。如果在该元素上同时绑定了捕获和冒泡的事件处理函数，那么捕获的事件处理函数会先于目标事件处理函数执行，在捕获阶段结束后，执行目标阶段的事件处理函数。

目标阶段示例代码：

document.querySelector('.box').addEventListener('click', function() {
  console.log('box target');
}, false);

如上所示，我们在.box元素上绑定了一个click事件，并将其useCapture参数设置为false，表示事件的冒泡阶段。在这个例子中，我们在.box元素上点击时，控制台会输出以下内容：

box target

这说明事件在目标元素上被触发，并且仅触发目标阶段的事件处理函数。

冒泡阶段

在冒泡阶段，事件从目标元素向上冒泡，直到到达文档根节点。如果在目标元素上同时绑定了冒泡事件和捕获事件处理函数，那么在目标阶段处理完后，会依次触发冒泡事件处理函数。

冒泡阶段示例代码：

document.addEventListener('click', function() {
  console.log('document bubble');
}, false);

document.querySelector('.container').addEventListener('click', function() {
  console.log('container bubble');
}, false);

document.querySelector('.box').addEventListener('click', function() {
  console.log('box bubble');
}, false);

如上所示，我们在文档的根节点、.container元素和.box元素上都绑定了click事件。在这个例子中，我们将useCapture设置为false，表示事件的冒泡阶段。当我们在.box元素上点击时，控制台会输出以下内容：

box bubble
container bubble
document bubble

这说明事件会从下至上依次触发，先触发目标阶段的事件处理函数，再触发冒泡阶段的事件处理函数。

结论

JavaScript的事件流可以分为捕获阶段、目标阶段和冒泡阶段。了解和理解这些阶段可以帮助我们更好地处理JavaScript中的DOM操作和事件处理。

最后，附加带你彻底搞懂JavaScript的事件流的Github仓库地址：https://github.com/ymc-github/js-event-flow