JS DOM 事件流及事件委托

最新推荐文章于 2024-07-25 08:06:37 发布

杠上开金花

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量800

点赞数 20

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_67521703/article/details/140416040

版权

事件流

JavaScript中的事件流是指事件在页面中的传播方式，描述了事件从触发到结束的过程。事件流有两个主要的模型：事件冒泡（Event Bubbling）和事件捕获（Event Capturing）。理解事件流对处理复杂的事件处理程序和确保代码的正确执行至关重要。

事件流的两个阶段

事件捕获阶段（Event Capturing Phase）：

事件从最顶层的元素（通常是 window 对象）开始，逐层向下传播到目标元素。
在这个阶段，父元素先接收到事件，然后事件继续向下传播到子元素。

事件冒泡阶段（Event Bubbling Phase）：

事件从目标元素开始，逐层向上冒泡到最顶层的元素（通常是 window 对象）。
在这个阶段，子元素先接收到事件，然后事件继续向上传播到父元素。

事件流的顺序
根据 W3C 的事件模型，事件流的顺序如下：

事件捕获阶段：从 window 开始向下传播，直到目标元素。
目标阶段：事件在目标元素上触发。
事件冒泡阶段：从目标元素开始向上传播，直到 window。

如何理解呢？从代码角度来说话

假设有以下 HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <title>Event Flow Example</title>
</head>
<body>
    <div id="parent">
        <button id="child">Click me</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

<script>
document.getElementById('parent').addEventListener('click', function(event) {
    debugger
    console.log('Parent clicked (capturing)', event.eventPhase);
}, true); // true 表示事件处理程序在捕获阶段执行

document.getElementById('child').addEventListener('click', function(event) {
    debugger
    console.log('Child clicked', event.eventPhase);
});

document.getElementById('parent').addEventListener('click', function(event) {
    debugger
    console.log('Parent clicked (bubbling)', event.eventPhase);
}); // 默认为 false，表示事件处理程序在冒泡阶段执行
</script>

我们打开代码调试工具
在捕获阶段在父元素 parent 上 eventPhase的值为 1
在这里插入图片描述
在目标阶段在目标元素 child 上 eventPhase的值为 2

在冒泡阶段在父元素 parent 上 eventPhase的值为 3

最后控制台打印

这里的eventPhase是W3C规定的
event.eventPhase 是一个只读属性，返回一个数值，表示事件当前处于事件流的哪个阶段。该属性的值可以是以下三个常量之一：

捕获阶段（Capturing Phase）：事件正在从最顶层的元素向目标元素传播。
目标阶段（Target Phase）：事件正在目标元素上触发。
冒泡阶段（Bubbling Phase）：事件正在从目标元素向最顶层的元素传播。

具体数值如下：

1 表示捕获阶段（Event.CAPTURING_PHASE）。
2 表示目标阶段（Event.AT_TARGET）。
3 表示冒泡阶段（Event.BUBBLING_PHASE）。

<!DOCTYPE html>
<html>
<head>
    <title>Event Flow Example</title>
</head>
<body>
    <div id="parent">
        <button id="child">Click me</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

<script>
document.getElementById('parent').addEventListener('click', function(event) {
    debugger
    if (event.eventPhase === Event.CAPTURING_PHASE) {
        console.log('Capturing phase');
    } else if (event.eventPhase === Event.AT_TARGET) {
        console.log('At target phase');
    } else if (event.eventPhase === Event.BUBBLING_PHASE) {
        console.log('Bubbling phase');
    }
}, true); // true 表示事件处理程序在捕获阶段执行

</script>

事件正确在捕获阶段进行
在这里插入图片描述
修改代码为false或者删除true（因为默认为false）

因为目标事件是在child上的所以只有目标阶段才会有 enentPhase 的值是2的情况
我们选中元素 child在试试

在这里插入图片描述
此时eventPhase不出所料的值为 2 修改false为true也一样因为按钮是绑定在 child上的在child是只能是目标阶段

注意我们这里点击的都是按钮也就是点击child才会发生如上情况
这里修改代码为最初的样子

<!DOCTYPE html>
<html>
<head>
    <title>Event Flow Example</title>
</head>
<body>
    <div id="parent">
        <button id="child">Click me</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

<script>
document.getElementById('parent').addEventListener('click', function(event) {
    debugger
    console.log('Parent clicked (capturing)', event.eventPhase);
}, true); // true 表示事件处理程序在捕获阶段执行

document.getElementById('child').addEventListener('click', function(event) {
    debugger
    console.log('Child clicked', event.eventPhase);
});

document.getElementById('parent').addEventListener('click', function(event) {
    debugger
    console.log('Parent clicked (bubbling)', event.eventPhase);
}); // 默认为 false，表示事件处理程序在冒泡阶段执行
</script>

在这里插入图片描述
我们不点击按钮但是点击右边属于父元素的部分
控制台打印2次这里 parent属于目标阶段后面数字为2 不管是true还是false都会执行

上面的代码都证明了事件会按照事件流的顺序执行，以下是事件流的示意图
在这里插入图片描述

事件绑定

使用 addEventListener 方法
这是现代浏览器推荐的事件绑定方法，它允许我们为一个元素绑定多个事件处理程序，并可以选择性地在捕获或冒泡阶段执行。

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

使用 HTML 属性绑定事件
在 HTML 标签中直接绑定事件处理程序：

<button id="myButton" onclick="buttonClicked()">Click me</button>

<script>
function buttonClicked() {
    console.log('Button clicked!');
}
</script>

这种方式虽然简单，但不推荐使用，因为它会使 HTML 和 JavaScript 代码耦合在一起，不利于代码的维护和可读性。

使用 onclick 等 DOM 属性

可以直接在 JavaScript 中为元素设置事件处理程序：

document.getElementById('myButton').onclick = function() {
    console.log('Button clicked!');
};

这种方式会覆盖先前设置的相同事件类型的处理程序，因此不推荐用于绑定多个处理程序。

事件委托

事件委托是一种通过利用事件冒泡机制，将事件处理程序绑定到元素的父级（或更高层级）上，而不是直接绑定到每个子元素上，从而实现对子元素事件的统一管理的技术。这种方法可以提高性能和代码的可维护性，特别是在需要处理大量动态生成的子元素时。

事件冒泡机制
在理解事件委托之前，先了解事件冒泡机制。当一个事件在某个元素上触发时，它会从事件的目标元素开始，逐层向上传播到最顶层的元素（通常是 window 对象），这一过程称为事件冒泡（Event Bubbling）。事件委托正是利用了这一机制。

事件委托的优点

减少内存消耗：如果有大量的子元素需要绑定事件处理程序，直接绑定会导致大量的内存占用。通过事件委托，只需在父级元素上绑定一个事件处理程序即可。
动态内容处理：对于动态添加或删除的子元素，使用事件委托可以自动处理，而不需要重新绑定事件处理程序。
代码简洁：使代码更加简洁和易于维护，减少重复代码。
实现事件委托
以下是一个详细的事件委托示例，演示如何实现和使用事件委托。

示例场景
假设有一个包含多个按钮的容器，当点击任意按钮时，都需要触发一个事件处理程序。

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation Example</title>
</head>
<body>
    <div id="buttonContainer">
        <button class="btn">Button 1</button>
        <button class="btn">Button 2</button>
        <button class="btn">Button 3</button>
        <!-- 更多按钮 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

document.getElementById('buttonContainer').addEventListener('click', function(event) {
    // 检查点击的目标元素是否是按钮
    if (event.target && event.target.classList.contains('btn')) {
        console.log(event.target.textContent + ' clicked');
    }
});

解释
绑定事件处理程序：在父级元素 buttonContainer 上绑定一个 click 事件处理程序。

事件处理程序的逻辑：
event.target 是实际触发事件的元素。使用 event.target.classList.contains(‘btn’) 检查点击的元素是否包含 btn 类，以确保只处理按钮的点击事件。如果是按钮，输出按钮的文本内容。

动态内容处理
事件委托特别适用于动态添加或删除的子元素。假设我们动态添加一个按钮到容器中：

const newButton = document.createElement('button');
newButton.className = 'btn';
newButton.textContent = 'Button 4';
document.getElementById('buttonContainer').appendChild(newButton);