事件冒泡与事件捕获：事件流的深入理解

好的，各位靓仔靓女们，欢迎来到今天的“事件流大爆炸”课堂！我是你们的老朋友，人称bug终结者的程序猿老王。今天我们要聊一个前端开发中非常重要的概念：事件冒泡和事件捕获。

别一听“事件”就觉得枯燥，咱们今天要把这俩兄弟扒个底朝天，让它们在你面前变得像邻家小妹一样亲切。准备好了吗？系好安全带，咱们发车啦！🚀

一、前戏：什么是事件？

在正式开始之前，我们先来温习一下什么是事件。事件，简单来说，就是用户和浏览器之间发生的一些“互动”。比如：

你用鼠标点击了一下按钮（click事件）
你在输入框里输入文字（input事件）
浏览器加载完成了一个页面（load事件）
鼠标移入/移出一个元素（mouseover/mouseout事件）
键盘上的按键被按下/松开（keydown/keyup事件）

这些都是事件，它们就像一个个小信号，告诉我们的程序，“嘿，发生什么事儿了，赶紧处理一下！”

二、正戏：事件流三部曲

那么，当一个事件发生时，浏览器是怎么知道该通知谁，又该按照什么顺序通知呢？这就涉及到了事件流的概念。事件流描述的是从页面中接收事件的顺序。标准的事件流分为三个阶段：

捕获阶段 (Capturing Phase)：事件从最顶层的 window 对象开始，沿着 DOM 树向下传递，直到到达目标元素。就像老鹰抓小鸡，从天而降，直奔目标！🦅
目标阶段 (Target Phase)：事件到达目标元素，也就是实际触发事件的元素。
冒泡阶段 (Bubbling Phase)：事件从目标元素开始，沿着 DOM 树向上冒泡，直到到达最顶层的 window 对象。就像水中的气泡，从水底向上升腾！🫧

用一个形象的比喻：

假设你家发生了火灾 🔥 (事件)。

捕获阶段： 消防局接到报警电话（window），然后一级一级通知到你所在的社区，再到你家门口。他们是来“捕获”这个火灾的！
目标阶段： 火焰在你家熊熊燃烧，这里就是“目标”。
冒泡阶段： 火焰从你家开始蔓延，先烧到邻居家，再到整个社区，最后可能烧到整个城市……（当然，消防员会阻止这种情况发生！）。这就是火焰的“冒泡”。

三、主角登场：事件冒泡 (Event Bubbling)

事件冒泡，顾名思义，就像气泡一样，从最内部的元素开始，一层一层地向外“冒”。当一个事件在某个元素上触发时，这个事件会沿着 DOM 树向上“冒泡”，触发父元素、祖父元素……直到根元素（window）上绑定的相同事件处理函数。

举个栗子 🌰：

<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
<style>
  #outer {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding: 20px;
  }
  #inner {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }
</style>
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    outer.addEventListener('click', function(event) {
      console.log('Outer div clicked!');
      console.log('Target:', event.target); // 触发事件的原始元素
      console.log('CurrentTarget:', event.currentTarget); // 当前事件监听器绑定的元素
    });

    inner.addEventListener('click', function(event) {
      console.log('Inner div clicked!');
      console.log('Target:', event.target);
      console.log('CurrentTarget:', event.currentTarget);
    });
  </script>
</body>
</html>

在这个例子中，如果你点击了 inner div，你会发现控制台先输出 Inner div clicked!，然后再输出 Outer div clicked!。这就是事件冒泡在起作用。

你点击了 inner div，触发了 inner div 上的 click 事件。
执行 inner div 上的事件处理函数，控制台输出 Inner div clicked!。
事件沿着 DOM 树向上冒泡，冒泡到了 outer div。
触发了 outer div 上的 click 事件。
执行 outer div 上的事件处理函数，控制台输出 Outer div clicked!。

为什么要冒泡？

事件冒泡的一个重要作用是事件委托 (Event Delegation)。事件委托允许你将事件监听器绑定到父元素上，而不是绑定到每个子元素上。这样，当子元素触发事件时，由于事件冒泡，父元素上的事件监听器也会被触发。

事件委托的优点：

减少内存占用： 只需要一个事件监听器，而不是为每个子元素都绑定一个。
动态添加元素： 对于动态添加到页面中的子元素，不需要重新绑定事件监听器。

举个栗子 🌰：

假设你有一个列表，列表中的每个 <li> 元素都需要绑定一个点击事件。

不使用事件委托：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  const listItems = document.querySelectorAll('li');
  listItems.forEach(item => {
    item.addEventListener('click', function() {
      console.log('Item clicked:', item.textContent);
    });
  });
</script>

使用事件委托：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  const list = document.querySelector('ul');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('Item clicked:', event.target.textContent);
    }
  });
</script>

使用事件委托，只需要在 <ul> 元素上绑定一个事件监听器，就可以处理所有 <li> 元素的点击事件。而且，即使你动态地向列表中添加新的 <li> 元素，也不需要重新绑定事件监听器。

阻止冒泡 (Stopping Bubbling)

有时候，我们不希望事件继续向上冒泡，比如，我们只想处理 inner div 上的点击事件，不想让 outer div 上的点击事件也被触发。这时，我们可以使用 event.stopPropagation() 方法来阻止事件冒泡。

<!DOCTYPE html>
<html>
<head>
<title>阻止事件冒泡示例</title>
<style>
  #outer {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding: 20px;
  }
  #inner {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }
</style>
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

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

    inner.addEventListener('click', function(event) {
      console.log('Inner div clicked!');
      event.stopPropagation(); // 阻止事件冒泡
    });
  </script>
</body>
</html>

在这个例子中，如果你点击了 inner div，只会输出 Inner div clicked!，而不会输出 Outer div clicked!。因为我们在 inner div 的事件处理函数中调用了 event.stopPropagation() 方法，阻止了事件向上冒泡。

四、另一位主角：事件捕获 (Event Capturing)

事件捕获是与事件冒泡相反的一种事件传播方式。事件捕获从最顶层的 window 对象开始，沿着 DOM 树向下传递，直到到达目标元素。

再举个栗子 🌰：

还是用之前的火灾的例子，消防局接到报警电话后，会一级一级通知到你所在的社区，再到你家门口。这个过程就是事件捕获。

如何使用事件捕获？

在使用 addEventListener() 方法绑定事件监听器时，可以传入第三个参数，来指定事件是在捕获阶段还是冒泡阶段触发。

addEventListener(event, function, useCapture)
- event：事件类型，例如 'click'。
- function：事件处理函数。
- useCapture：一个布尔值，指定事件是在捕获阶段还是冒泡阶段触发。
  - true：在捕获阶段触发。
  - false（默认值）：在冒泡阶段触发。

举个栗子 🌰：

<!DOCTYPE html>
<html>
<head>
<title>事件捕获示例</title>
<style>
  #outer {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding: 20px;
  }
  #inner {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }
</style>
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    outer.addEventListener('click', function(event) {
      console.log('Outer div clicked (capturing phase)!');
    }, true); // 在捕获阶段触发

    inner.addEventListener('click', function(event) {
      console.log('Inner div clicked (bubbling phase)!');
    });
  </script>
</body>
</html>

在这个例子中，如果你点击了 inner div，你会发现控制台先输出 Outer div clicked (capturing phase)!，然后再输出 Inner div clicked (bubbling phase)!。

你点击了 inner div，触发了 click 事件。
事件进入捕获阶段，从 window 对象开始，沿着 DOM 树向下传递。
到达 outer div，由于 outer div 上的事件监听器是在捕获阶段触发的，所以执行 outer div 上的事件处理函数，控制台输出 Outer div clicked (capturing phase)!。
事件继续向下传递，到达 inner div。
事件进入目标阶段，执行 inner div 上的事件处理函数，控制台输出 Inner div clicked (bubbling phase)!。
事件进入冒泡阶段，由于 outer div 上的事件监听器是在捕获阶段触发的，所以不会再次触发 outer div 上的事件处理函数。

事件捕获的应用场景

事件捕获通常用于以下场景：

预先处理事件： 在事件到达目标元素之前，对事件进行一些处理，例如，验证用户输入、阻止默认行为等。
实现更精细的控制： 可以更精确地控制事件的传播顺序。

五、总结：事件冒泡 vs 事件捕获

特性	事件冒泡 (Bubbling)	事件捕获 (Capturing)
传播方向	从目标元素开始，沿着 DOM 树向上冒泡。	从 window 对象开始，沿着 DOM 树向下传递，直到到达目标元素。
触发顺序	目标元素 -> 父元素 -> 祖父元素 -> … -> window	window -> … -> 祖父元素 -> 父元素 -> 目标元素
默认行为	默认情况下，事件监听器在冒泡阶段触发。	需要显式指定 `useCapture` 为 `true`，才能在捕获阶段触发。
应用场景	事件委托、处理多个子元素的相同事件。	预先处理事件、实现更精细的控制。
常用方法	`event.stopPropagation()` 阻止事件冒泡。
兼容性	所有主流浏览器都支持。	所有主流浏览器都支持。

六、进阶：event.target vs event.currentTarget

在事件处理函数中，我们经常会用到 event.target 和 event.currentTarget 这两个属性。它们有什么区别呢？

event.target：触发事件的原始元素。
event.currentTarget：当前事件监听器绑定的元素。

举个栗子 🌰：

还是用之前的事件冒泡的例子：

<!DOCTYPE html>
<html>
<head>
<title>event.target vs event.currentTarget 示例</title>
<style>
  #outer {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding: 20px;
  }
  #inner {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }
</style>
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    outer.addEventListener('click', function(event) {
      console.log('Outer div clicked!');
      console.log('Target:', event.target); // 触发事件的原始元素
      console.log('CurrentTarget:', event.currentTarget); // 当前事件监听器绑定的元素
    });

    inner.addEventListener('click', function(event) {
      console.log('Inner div clicked!');
      console.log('Target:', event.target);
      console.log('CurrentTarget:', event.currentTarget);
    });
  </script>
</body>
</html>

在这个例子中，如果你点击了 inner div：

在 inner div 的事件处理函数中，event.target 和 event.currentTarget 都指向 inner div。
在 outer div 的事件处理函数中，event.target 指向 inner div，event.currentTarget 指向 outer div。

七、总结的总结

好了，今天的“事件流大爆炸”课堂就到这里了。我们一起学习了事件冒泡和事件捕获的概念、原理、应用场景，以及如何使用 event.stopPropagation() 方法阻止事件冒泡。希望今天的课程能帮助你更好地理解和掌握事件流，在前端开发的道路上更上一层楼！💪

记住，事件冒泡和事件捕获就像太极拳，一阴一阳，相辅相成。掌握了它们，你就能在前端的世界里游刃有余，bug无所遁形！

下次再见！👋

发表回复 取消回复

发表回复取消回复