javascript 事件冒泡

JavaScript事件冒泡

流程概述

事件冒泡是指在页面中，如果一个元素触发了某个事件，该事件会向父元素进行传播，直到到达顶层的父元素。具体的流程如下表所示：

代码实现

为了让你能更好地理解事件冒泡的实现过程，我将逐步为你演示每个步骤需要做的事情及相应的代码实现。

步骤1：事件被触发在具体的子元素上

在这个示例中，我们将创建一个包含多个嵌套子元素的HTML页面，并在其中一个子元素上绑定一个点击事件。首先，我们需要在HTML中定义这些元素：

<div id="parent">
  <div id="child">
    <button id="button">点击我</button>
  </div>
</div>

在这段HTML代码中，我们有一个父元素parent，包含一个子元素child，并在child中有一个按钮button。接下来，我们需要给按钮绑定一个点击事件，用于触发事件冒泡。

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

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

在这段JavaScript代码中，我们通过getElementById方法获取到了按钮元素，并使用addEventListener方法为按钮绑定了一个点击事件。当按钮被点击时，控制台会输出"按钮被点击了"。

步骤2：事件开始向父元素进行冒泡

在这一步中，我们需要将点击事件冒泡到父元素child。为了实现这一步骤，我们可以使用dispatchEvent方法手动触发一个自定义事件，并将其冒泡到父元素。

button.addEventListener('click', function(event) {
  console.log('按钮被点击了');
  const customEvent = new Event('customEvent', { bubbles: true });
  button.dispatchEvent(customEvent);
});

在这段代码中，我们创建了一个自定义事件customEvent，并将其冒泡属性设置为true。然后，我们使用dispatchEvent方法手动触发了这个事件。注意，这里的事件名称可以自定义，只要保证它与父元素上的事件处理函数名称一致即可。

步骤3：事件继续向上一级父元素冒泡

在这一步中，我们需要将事件继续冒泡到父元素parent。为了实现这一步骤，我们需要在child元素上绑定一个自定义事件的处理函数，并在该处理函数中触发事件冒泡。

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

child.addEventListener('customEvent', function(event) {
  console.log('自定义事件在child元素上触发了');
  event.stopPropagation(); // 阻止事件继续冒泡
});

在这段代码中，我们使用addEventListener方法为child元素绑定了一个名为customEvent的自定义事件处理函数。在处理函数中，我们输出了"自定义事件在child元素上触发了"。同时，我们调用了event.stopPropagation()方法来阻止事件继续向上冒泡。

步骤4：事件继续向更高层级的父元素冒泡

在这一步中，我们需要将事件继续冒泡到更高层级的父元素。为了实现这一步骤，我们需要在parent元素上绑定一个