【JavaScript】DOM事件的传播机制

✨ 专栏介绍

在现代Web开发中，JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性，还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言，JavaScript具有广泛的应用场景，并且不断发展演进。在本专栏中，我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧！

在这里插入图片描述

文章目录

- ✨ 专栏介绍
- 引言
- 事件与事件流
- 标准 DOM 事件流
- 事件冒泡流
- 事件捕获流
- 事件委托流
- 总结
- 😶 写在结尾
- - - `前端设计模式专栏`
    - `Vue专栏`
    - `JavaScript（ES6）专栏`

引言

DOM事件的传播机制是指当一个事件在DOM树中触发时，它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段：捕获阶段、目标阶段和冒泡阶段。此外，还有一种常用的技术称为事件委托，它能够简化事件处理程序的绑定和管理。本文将详细介绍这些概念，并提供相应的代码示例。

事件与事件流

在介绍事件传播机制之前，我们先来了解一下什么是事件和事件流。在DOM中，事件是指用户与页面交互时发生的动作，比如点击、鼠标移动等。而事件流则是指这些事件在DOM树中传播的路径。

每次用户与一个网页进行交互，例如点击链接，按下一个按键或者移动鼠标时，就会触发一个事件。我们的程序可以检测这些事件，然后对此作出响应。从而形成一种交互。

这样可以使我们的页面变得更加的有意思，而不仅仅像以前一样只能进行浏览。

JavaScript 中采用一个叫做事件监听器的东西来监听事件是否发生。这个事件监听器类似于一个通知，当事件发生时，事件监听器会让我们知道，然后程序就可以做出相应的响应。

通过这种方式，就可以避免让程序不断地去检查事件是否发生，让程序在等待事件发生的同时，可以继续做其他的任务。

标准 DOM 事件流

DOM事件流是指在DOM树中，事件从最外层的节点开始传播，逐级向下，直到达到目标节点，然后再从目标节点向上传播到最外层的节点。

DOM事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段：事件从最外层的节点开始传播，逐级向下，直到达到目标节点。在捕获阶段中，事件会依次触发每个经过的节点上绑定的捕获型事件处理函数。
目标阶段：事件达到目标节点后，在目标节点上触发绑定的事件处理函数。在这个阶段中，只会触发目标节点上绑定的事件处理函数。
冒泡阶段：事件从目标节点开始向上传播，逐级向上，直到达到最外层的节点。在冒泡阶段中，事件会依次触发每个经过的节点上绑定的冒泡型事件处理函数。

在实际应用中，默认情况下大部分DOM事件都是按照冒泡方式进行传播。但是也可以通过调用addEventListener方法时传入第三个参数为true来将其设置为捕获方式进行传播。

总结起来，DOM事件流就是指从最外层的节点开始传播，逐级向下到达目标节点，然后再从目标节点向上传播到最外层的节点的过程。这个过程分为捕获阶段、目标阶段和冒泡阶段。

下面是一个示例，演示了标准 DOM 事件流的传播顺序：

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层元素被点击');
}, true);

inner.addEventListener('click', function() {
  console.log('内层元素被点击');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

当我们点击按钮时，控制台会输出以下内容：

外层元素被点击内层元素被点击按钮被点击

可以看到，事件首先在捕获阶段从外层元素开始传播，然后到达目标元素，最后在冒泡阶段从目标元素向上冒泡。

事件冒泡流

事件冒泡是指在DOM树中，事件从目标元素开始向上冒泡传播的过程。也就是说，在冒泡阶段，事件会依次触发父级元素的相同类型事件处理程序。

下面是一个示例，演示了事件冒泡的过程：

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层元素被点击');
});

inner.addEventListener('click', function() {
  console.log('内层元素被点击');
});

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

当我们点击按钮时，控制台会输出以下内容：

按钮被点击内层元素被点击外层元素被点击

可以看到，事件首先在目标元素上触发，然后在冒泡阶段依次触发父级元素的相同类型事件处理程序。

事件捕获流

事件捕获是指在DOM树中，事件从最外层的父级元素开始向下捕获传播的过程。也就是说，在捕获阶段，事件会依次触发父级元素的相同类型事件处理程序。

下面是一个示例，演示了事件捕获的过程：

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层元素被点击');
}, true);

inner.addEventListener('click', function() {
  console.log('内层元素被点击');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

当我们点击按钮时，控制台会输出以下内容：

外层元素被点击内层元素被点击按钮被点击

可以看到，事件首先在捕获阶段依次触发父级元素的相同类型事件处理程序，然后到达目标元素。

事件委托流

事件委托是一种常用的技术，它利用了事件冒泡的特性。通过在父级元素上绑定一个事件处理程序，可以监听子级元素触发的事件。这样一来，无论子级元素是已经存在的还是动态生成的，都可以通过父级元素来管理它们的事件。

下面是一个示例，演示了事件委托的过程：

<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

const list = document.getElementById('list');

list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('列表项被点击');
    console.log('触发事件的目标元素是：', event.target);
  }
});

当我们点击任意一个列表项时，控制台会输出以下内容：

列表项被点击触发事件的目标元素是： <li>列表项1</li>

可以看到，通过在父级元素上绑定点击事件处理程序，我们可以捕获到子级元素触发的点击事件，并且可以获取到触发事件的目标元素。这样一来，无论我们添加或删除列表项，只需要在父级元素上绑定一个事件处理程序即可。

总结

通过以上介绍，我们了解了DOM事件传播机制的三个阶段：捕获阶段、目标阶段和冒泡阶段。此外，我们还学习了如何利用事件委托来简化事件处理程序的绑定和管理。掌握这些概念和技巧，能够帮助我们更好地处理和管理DOM中的各种交互事件。

😶 写在结尾

`前端设计模式专栏`

在这里插入图片描述
设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

`Vue专栏`

在这里插入图片描述

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

`JavaScript（ES6）专栏`

在这里插入图片描述

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏