JS DOM 事件流及事件委托

来源：五一七教育网

事件流

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

这里的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>

事件正确在捕获阶段进行

<!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都会执行

上面的代码都证明了事件会按照事件流的顺序执行，以下是事件流的示意图

事件绑定

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);

无需任何额外的事件绑定，新添加的按钮也会自动拥有相同的点击事件处理程序，因为事件处理程序绑定在父级元素上。

优化和注意事项

事件处理范围：在事件处理程序中，确保只处理感兴趣的事件。可以使用 event.target 和一些条件判断来过滤无关的事件。
防止过度绑定：虽然事件委托减少了事件处理程序的数量，但仍需谨慎，不要在顶层元素（如 document 或 body）上绑定太多事件处理程序，以避免性能问题。
总结

事件委托是通过在父级元素上绑定事件处理程序，利用事件冒泡机制来处理子元素事件的方法。它有助于提高性能、处理动态内容和保持代码简洁。在实际应用中，可以根据具体需求灵活使用事件委托，确保代码的高效性和可维护性。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文