理解和实现事件冒泡和事件捕获的原理和方式

事件冒泡与事件捕获的原理与实现方式

事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是JavaScript中处理DOM（文档对象模型）事件的两种不同的机制。了解它们的原理和实现方式可以帮助我们更好地理解和处理事件。

事件冒泡原理：
事件冒泡是指当一个具体的事件发生在某个DOM元素上时，如果该元素定义了该事件的处理函数，那么该事件将首先在该元素上触发，然后逐级向上冒泡至该元素的父元素，直到触发文档根元素的处理函数。

实现方式：
在JavaScript中，我们可以使用addEventListener方法来为元素添加事件监听器，从而实现事件冒泡。
以下是一个示例：

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector(\'#outer\');
const inner = document.querySelector(\'#inner\');
const btn = document.querySelector(\'#btn\');

outer.addEventListener(\'click\', function() {
  console.log(\'外层div被点击！\');
});

inner.addEventListener(\'click\', function() {
  console.log(\'内层div被点击！\');
});

btn.addEventListener(\'click\', function(event) {
  console.log(\'按钮被点击！\');
  event.stopPropagation(); // 阻止事件冒泡
});