使用Event Bubbling操纵DOM：JS开发实践

一、Event Bubbling是什么

Event Bubbling（事件冒泡）是DOM事件中的一种机制。当某一元素上发生了某个事件，例如click事件，这个事件会从该元素开始逐级向上传播，直到传到Document为止。这一过程就像气泡从水底冒起，逐渐扩大至水面。

可以通过Event Bubbling机制，在一个父元素上监听它的所有子元素的某个事件，从而实现对子元素进行操作的效果。这一机制可以大大简化开发过程，提高程序的性能以及可读性。

二、如何使用Event Bubbling操作DOM

在HTML中，元素嵌套是嵌套使用Event Bubbling的基础。在JS中，可以通过addEventListener方法来实现Event Bubbling。该方法的调用方式如下：

parentElement.addEventListener(eventType, function(event) {
  // 在此处对子元素进行操作
});

在这里，parentElement指父元素，eventType指监听的事件的类型。在匿名函数中，传入的event对象包含了与事件相关的信息，例如事件源和事件类型等。在函数中，可以通过event.target属性访问事件的目标元素。

三、如何避免Event Bubbling的副作用

Event Bubbling机制的一大副作用就是可能导致事件的多次触发。例如，当一个button元素被点击时，它所在的父元素也可能会触发click事件。而在同一父元素中，所有兄弟元素也都有可能触发该事件，这样一来就会出现多次触发的情况。为了避免这种情况，可以通过event.stopPropagation()方法来阻止事件的传播。该方法的调用方式如下：

childElement.addEventListener(eventType, function(event) {
  // 在此处对子元素进行操作，同时阻止事件冒泡
  event.stopPropagation();
});

在这里，childElement指子元素，eventType指监听的事件的类型。在匿名函数中，调用event.stopPropagation()方法来阻止事件向上传播。

四、使用Event Bubbling的实际应用

一个常见的使用Event Bubbling的实例是实现一个可点击的菜单。通过监听菜单的父元素（例如一个

元素），并根据事件目标元素的class属性判断点击了哪个子元素，从而执行对应的操作。

以下是一个简单的菜单示例代码：

<ul id="menu">
  <li class="item">菜单项1</li>
  <li class="item">菜单项2</li>
  <li class="item">菜单项3</li>
  <li class="item">菜单项4</li>
</ul>

<script>
var menu = document.getElementById('menu');
menu.addEventListener('click', function(event) {
  // 判断是否为菜单项
  if (event.target.classList.contains('item')) {
    // 执行对应的操作
    console.log('点击了' + event.target.innerHTML);
  }
});
</script>

在这里，使用addEventListener方法监听menu元素上的click事件。在匿名函数中，通过event.target.classList.contains(‘item’)判断点击的目标元素是否具有item类，如果是，则输出对应的操作结果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/289340.html