一文读懂JS事件循环、事件冒泡与事件委托

引言

JavaScript 是一种广泛使用的编程语言，特别是在前端开发领域。为了理解 JavaScript 中的异步行为和事件处理机制，我们需要深入了解事件循环、事件冒泡和事件委托等概念。本文将详细解释这些概念及其在实际编程中的应用。

1. JavaScript 事件循环

JavaScript 是单线程执行的，这意味着在任何给定的时间点，只能执行一个任务。然而，在现代 web 应用程序中，我们经常需要处理异步操作，如网络请求、定时器等。为了管理这些异步操作，JavaScript 引入了事件循环（Event Loop）的概念。

1.1 基本概念

事件循环负责协调 JavaScript 引擎与 Web API 之间的通信。它遵循以下简单的流程：

执行栈（Call Stack）：这是一个数据结构，用来存储当前正在执行的函数。每当调用一个函数时，它会被压入栈顶；当函数执行完毕后，它会从栈顶弹出。
消息队列（Message Queue）：这是一个保存待处理任务的数据结构。当异步任务完成时，它们会被放入消息队列。
事件循环：检查执行栈是否为空。如果为空且消息队列中有任务，则将队列中的第一个任务推送到执行栈中执行。

1.2 实例

考虑一个简单的例子，演示事件循环的工作原理：

Javascript

深色版本

1console.log('Start');
2
3setTimeout(() => {
4  console.log('Timeout');
5}, 0);
6
7console.log('End');

输出结果将是：

深色版本

1Start
2End
3Timeout

这里，setTimeout 函数并不会立即执行，而是被放入消息队列等待执行栈空闲时再执行。

2. 事件冒泡与捕获

在 DOM（Document Object Model）中，事件可以在元素之间传播。事件冒泡是指事件从最深的节点开始，逐级向上冒泡到根节点的过程。而事件捕获则是相反的过程，事件从根节点开始向下传递到最深的节点。

2.1 事件冒泡

事件冒泡是最常见的事件传播方式。当事件发生在一个特定的元素上时，该事件首先由这个元素处理，然后沿着 DOM 树向上冒泡，直到达到 document 对象。

2.2 事件捕获

事件捕获是从 document 对象开始，逐级向下捕获，直到达到事件的目标节点。

2.3 示例

下面的例子展示了事件冒泡和事件捕获的区别：

Html

深色版本

1<div id="parent">
2  <button id="child">Click me</button>
3</div>
4
5<script>
6  document.getElementById('parent').addEventListener('click', function(event) {
7    console.log('Parent clicked');
8  }, false); // false 表示使用事件冒泡
9
10  document.getElementById('child').addEventListener('click', function(event) {
11    console.log('Child clicked');
12  }, false); // false 表示使用事件冒泡
13
14  document.getElementById('parent').addEventListener('click', function(event) {
15    console.log('Parent captured');
16  }, true); // true 表示使用事件捕获
17</script>

在这个例子中，如果你点击按钮，控制台将会输出：

深色版本

1Child clicked
2Parent clicked

如果我们将其中一个事件监听器的第三个参数设置为 true，那么控制台输出将有所不同，因为事件捕获先于事件冒泡发生。

3. 事件委托

事件委托是一种优化技术，它利用事件冒泡的特性来减少事件监听器的数量。当一个容器内的多个子元素都需要绑定相同的事件处理函数时，我们可以将事件监听器绑定到父元素上，而不是每个子元素上。

3.1 优势

性能提升：减少了 DOM 上的事件监听器数量。
动态更新：即使子元素是在运行时动态添加的，也能正确响应事件。

3.2 实现方法

要实现事件委托，你需要在父元素上绑定事件监听器，并在事件触发时检查事件目标是否符合预期。

3.3 示例

下面是一个使用事件委托的示例：

Html

深色版本

1<ul id="list">
2  <li>Item 1</li>
3  <li>Item 2</li>
4  <li>Item 3</li>
5</ul>
6
7<script>
8  document.getElementById('list').addEventListener('click', function(event) {
9    if (event.target.tagName === 'LI') {
10      console.log(`Clicked on ${event.target.textContent}`);
11    }
12  });
13</script>

在这个例子中，点击任意列表项都会输出相应的文本内容。