jquery 冒泡实例

jQuery 冒泡实例

jQuery 是一个流行的 JavaScript 库，它可以简化 JavaScript 编程并提供强大的 DOM 操作功能。其中一个重要的特性就是事件冒泡机制。

事件冒泡机制

事件冒泡机制指的是事件会从最深层的元素开始，逐渐向外层的祖先元素传递。当子元素的事件被触发时，父元素的同一事件也会被触发。这个过程就像气泡一样逐渐向上冒泡，所以称之为 "事件冒泡"。

jQuery 如何利用事件冒泡

jQuery 可以利用事件冒泡来方便地处理多个元素上的同一事件。例如，可以在一个父元素上绑定一个事件处理程序，以处理其所有子元素上的事件。通过 jQuery 的 event 对象，可以轻松地访问触发事件的元素，从而进行针对性的处理。

下面是 jQuery 冒泡实例：

<div id="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>

<script>
  $("#container").on("click", ".child", function(event) {
    var target = $(event.target);
    target.css("background-color", "red");
  });
</script>

在这个例子中，当 .child 元素被点击时，"click" 事件会在 #container 元素上冒泡。jQuery 的 .on() 方法将事件处理程序绑定到 #container 上，在其所有子元素上触发。

通过使用事件对象 event 和选择器 ".child"，可以获取触发该事件的元素，并进行处理。例如，在这个例子中，我们改变了背景颜色为红色。