js 冒泡事件和捕获事件|极客笔记

js 冒泡事件和捕获事件

在学习JavaScript开发过程中，事件处理是非常重要的知识点之一。事件处理可以使网页和用户进行交互，从而实现动态效果和响应用户操作。在事件处理中，冒泡事件和捕获事件是两种最基本的事件传播机制。本文将详细介绍冒泡事件和捕获事件的概念、特点、应用以及相互之间的区别。

事件传播概念

在HTML文档中，当用户操作元素，比如点击按钮、输入文本等时，会触发相应的事件。事件处理机制指的是事件在DOM树上的传播过程，主要包括事件的冒泡和捕获。

事件传播包括三个阶段：

捕获阶段：事件从祖先节点向目标节点传播的过程。
目标阶段：事件在目标节点上触发。
冒泡阶段：事件从目标节点向祖先节点传播的过程。

冒泡事件

当触发了一个事件时，该事件会首先在目标元素上触发，然后逐级向其祖先元素传播，直至根节点。这种事件传播方式就是冒泡事件。

冒泡事件的特点：

事件由内向外传播，即从目标元素向祖先元素传播。
最先触发的是目标元素上的事件，然后向上冒泡到祖先元素。
冒泡事件的默认处理方式是从目标元素开始，逐级冒泡到根节点。

冒泡事件的应用

冒泡事件常用于对嵌套元素进行事件委托。通过在祖先元素上监听事件，可以减少事件处理程序的数量，提高性能。

下面是一个简单的示例代码，演示了冒泡事件的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡事件示例</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        const list = document.getElementById('list');

        list.addEventListener('click', function(event) {
            if(event.target.tagName === 'LI') {
                console.log('你点击了 ' + event.target.innerText);
            }
        });
    </script>
</body>
</html>

在以上示例中，为父元素 <ul> 添加了点击事件监听器，通过判断点击的元素是否为 <li> 元素，来实现对列表项的点击事件委托处理。

捕获事件

与冒泡事件相反，捕获事件是指事件从根节点逐级向目标元素传播的过程。即事件从祖先元素传播到目标元素，最后在目标元素上触发。

捕获事件的特点：

事件由外向内传播，即从根节点向目标元素传播。
事件首先在根节点上触发，然后逐级向目标元素传播。
捕获事件较少使用，通常使用冒泡事件来处理用户操作。

捕获事件的应用

捕获事件较少使用，但也可以在一定场景下发挥作用。比如，需要在执行冒泡事件之前执行一些操作，可以使用捕获事件。

以下是一个简单的示例代码，演示了捕获事件的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>捕获事件示例</title>
</head>
<body>
    <div id="container">
        <button>点击按钮</button>
    </div>

    <script>
        const container = document.getElementById('container');
        const button = document.querySelector('button');

        container.addEventListener('click', function() {
            console.log('容器上的点击事件捕获阶段');
        }, true);

        button.addEventListener('click', function() {
            console.log('按钮上的点击事件冒泡阶段');
        });
    </script>
</body>
</html>

在以上示例中，为容器元素 <div> 添加了点击事件的捕获监听器，通过设定 useCapture 参数为 true，在按钮元素 <button> 触发点击事件之前，先触发容器元素的点击事件。