jquery on 冒泡|极客教程

jquery on 冒泡

在使用 jQuery 进行事件处理时，经常会用到 on 方法来绑定事件。on 方法除了可以绑定事件处理程序外，还有一个非常重要的特性就是事件冒泡。本文将详细介绍 on 方法如何实现事件冒泡。

事件冒泡概念

事件冒泡是指事件在触发后，会从最具体的节点逐级向上传播至最不具体的节点。也就是说，如果一个元素上发生了某个事件，那么它的父元素也会接收到这个事件。这种事件传播方式可以让事件的处理程序在更高层次的节点上统一处理，减少重复代码。

jQuery `on` 方法

jQuery 中的 on 方法用于绑定事件处理程序到元素上，可以用于动态添加的元素，也可以绑定多个事件类型。其基本语法如下：

$(selector).on(eventType, childSelector, eventData, handler);

eventType：事件类型，如 click, mouseover, keyup 等。
childSelector：可选参数，用于过滤需要执行事件处理程序的子元素选择器。
eventData：可选参数，传递给事件处理程序的额外数据。
handler：事件处理程序函数。

事件冒泡实现

当使用 on 方法绑定事件处理程序时，事件冒泡的实现方式是通过将事件处理程序绑定到祖先元素上，设置一个选择器参数来过滤需要执行事件处理程序的具体子元素。当事件冒泡到祖先元素时，根据选择器参数的设置，判断是否执行对应的事件处理程序。

下面通过一个示例来演示事件冒泡的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="parent">
    <button id="child">Click me</button>
</div>

<script>
     $("#parent").on("click", "#child", function() { console.log("Child button clicked!"); });$ ("#parent").on("click", function() {
        console.log("Parent div clicked!");
    });
</script>

</body>
</html>

在上面的示例中，当点击按钮时会触发按钮的点击事件处理程序，并打印 “Child button clicked!”，同时由于事件冒泡的机制，父元素也会接收到点击事件，触发父元素的点击事件处理程序，并打印 “Parent div clicked!”。