【JS】事件捕获和事件冒泡的区别

news2024/9/21 23:29:54

事件捕获和事件冒泡是指在 DOM 树中处理事件时的两种不同的传播方式。它们之间的主要区别在于事件传播的方向和顺序：

事件捕获（Capture）

方向： 从最外层的祖先元素向目标元素传播。
顺序： 事件首先从最外层的祖先元素开始传播，直到达到目标元素。
应用场景： 可以在捕获阶段对事件进行拦截或预处理。

事件冒泡（Bubble）

方向： 从目标元素向最外层的祖先元素传播。
顺序： 事件从目标元素开始向上冒泡，直到达到最外层的祖先元素。
应用场景： 可以在冒泡阶段对事件进行响应或处理。

区别总结：

方向不同： 捕获是从外向内，冒泡是从内向外。
应用不同： 捕获通常用于预处理或拦截事件，而冒泡通常用于响应或处理事件。

事件传播的三个阶段：

捕获阶段（Capture Phase）： 事件从最外层的祖先元素向目标元素传播。
目标阶段（Target Phase）： 事件到达目标元素。
冒泡阶段（Bubble Phase）： 事件从目标元素向最外层的祖先元素传播。

在实际开发中，你可以根据需要选择在捕获阶段或冒泡阶段处理事件，利用这两种传播方式来实现不同的交互效果和逻辑。

我们可以用addEventListener 的第三个参数capture的取值，形象地看事件捕获和冒泡的区别。capture（布尔值，表示事件是否在捕获阶段触发,默认为false）

以下是冒泡的示例，由内向外

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Project</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #parent {
            background-color: #9fc882;
            padding: 20px;
            border: 2px solid #73deaf;
        }

        #child {
            background-color: #c8f0d9;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #a4e1a5;
        }
    </style>
</head>

<body>
    <h1>Welcome to My Simple HTML Project</h1>

    <div id="parent">Parent Element
        <div id="child">Child Element</div>
    </div>

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

        // 事件捕获阶段（useCapture 为 true）
        // parent.addEventListener('click', () => {
        //     console.log('Parent Element Clicked - Capture Phase');
        // }, true);

        // child.addEventListener('click', () => {
        //     console.log('Child Element Clicked - Capture Phase');
        // }, true);

        // 事件冒泡阶段（useCapture 为 false 或省略）
        parent.addEventListener('click', () => {
            console.log('Parent Element Clicked - Bubble Phase');
        });

        child.addEventListener('click', () => {
            console.log('Child Element Clicked - Bubble Phase');
        });
    </script>
</body>

</html>

这是捕获的示例，由外想内

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Project</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #parent {
            background-color: #9fc882;
            padding: 20px;
            border: 2px solid #73deaf;
        }

        #child {
            background-color: #c8f0d9;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #a4e1a5;
        }
    </style>
</head>

<body>
    <h1>Welcome to My Simple HTML Project</h1>

    <div id="parent">Parent Element
        <div id="child">Child Element</div>
    </div>

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

        // 事件捕获阶段（useCapture 为 true）
        parent.addEventListener('click', () => {
            console.log('Parent Element Clicked - Capture Phase');
        }, true);

        child.addEventListener('click', () => {
            console.log('Child Element Clicked - Capture Phase');
        }, true);

        // 事件冒泡阶段（useCapture 为 false 或省略）
        // parent.addEventListener('click', () => {
        //     console.log('Parent Element Clicked - Bubble Phase');
        // });

        // child.addEventListener('click', () => {
        //     console.log('Child Element Clicked - Bubble Phase');
        // });
    </script>
</body>

</html>

应用场景示例：

1. 事件代理（Event Delegation）

场景描述： 在一个列表中有多个子项，需要为每个子项添加点击事件监听器。
应用方式：
- 使用事件冒泡机制，在整个列表的父元素上添加一个点击事件监听器。
- 在监听器中通过事件对象的 target 属性判断用户点击了哪个子项。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on:', event.target.textContent);
  }
});
</script>

2. 表单验证

场景描述： 在表单提交前需要对表单字段进行验证。
应用方式：
- 在表单的父元素上添加一个 submit 事件监听器，使用事件捕获阶段。
- 在捕获阶段中进行表单字段的验证，如果验证不通过，阻止事件的默认行为（即阻止表单提交）。

<form id="myForm">
  <input type="text" id="username" placeholder="Username">
  <input type="password" id="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

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

form.addEventListener('submit', (event) => {
  // 模拟表单验证，这里只是简单示例
  if (!document.getElementById('username').value || !document.getElementById('password').value) {
    event.preventDefault(); // 阻止表单提交
    console.log('Please fill in all fields.');
  }
}, true); // 使用事件捕获阶段
</script>