事件流事件委托

汓㸓

已于 2024-02-20 11:29:11 修改

阅读量978

点赞数 20

文章标签：前端数据库 javascript

于 2024-02-20 11:18:09 首次发布

本文链接：https://blog.csdn.net/qq_52265298/article/details/136184756

版权

本文详细介绍了HTML事件流的三个阶段（捕获、目标、冒泡），演示了如何通过事件委托优化性能，以及如何通过event.stopPropagation()阻止事件冒泡和使用removeEventListener()解绑事件。

摘要由CSDN通过智能技术生成

一、事件流

事件流（Event flow）是指在 HTML 文档中发生事件时，事件的传播方式或者说流动路径。事件流描述了事件从触发元素开始，经过各个元素传递并最终到达目标元素的过程。

事件流有三个阶段：

捕获阶段（Capture phase）：事件从最外层的祖先元素开始向下传递，直到达到触发事件的目标元素。在捕获阶段，事件会经历所有祖先元素的捕获处理程序。
目标阶段（Target phase）：事件到达目标元素，即触发事件的元素。在目标阶段，事件会触发目标元素自身绑定的事件处理程序。
冒泡阶段（Bubble phase）：事件从目标元素开始向上传递，沿着祖先元素的路径冒泡上升。在冒泡阶段，事件会经历所有祖先元素的冒泡处理程序。

事件流的默认顺序是从捕获阶段开始，然后进入目标阶段，最后是冒泡阶段。但是可以通过使用 addEventListener 方法的第三个参数，将事件绑定到特定阶段（捕获阶段、目标阶段或冒泡阶段），来改变事件处理的顺序。

以下是事件流的示意图：

|----------------------------- Window ----------------------------|
| |
| |----------------- Document -----------------| |
| | | |
| | |-------- Element -------| | |
| | | | | |
| | | Capture Phase | | |
| | | | | |
| | | Event Capturing Order | | |
| | | (Top to Bottom) | | |
| | | | | |
| | |------------------------| | |
| | | |
| | Target | |
| | Phase | |
| | Event Target | |
| | | |
| |------------------------------------------| |
| |
| |----------------- Document -----------------| |
| | | |
| | |-------- Element -------| | |
| | | | | |
| | | Bubble Phase | | |
| | | | | |
| | | Event Bubbling Order | | |
| | | (Bottom to Top) | | |
| | | | | |
| | |------------------------| | |
| | | |
|----------------------------- Window ----------------------------|

在事件流中，事件会依次经过目标元素的父元素，直到根元素。这种事件传播的特性使得我们可以在合适的位置捕获和处理事件，对于事件委托和事件冒泡等技术非常有用。

二、事件委托

事件委托（Event delegation）是一种利用事件冒泡的机制，通过将事件处理程序绑定到父元素而不是每个子元素来管理事件的技术。当子元素上的事件被触发时，事件会向上传播到父元素，然后再根据事件的目标（target）来执行相应的事件处理程序。

通过事件委托，我们可以避免给每个子元素都绑定事件处理程序，减少内存消耗并提高性能。另外，当动态添加或移除子元素时，无需重新绑定事件处理程序，因为事件处理程序仍然在父元素上。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Delegation Example</title>
<style>
    ul {
        list-style-type: none;
    }
    li {
        padding: 10px;
        cursor: pointer;
    }
</style>
</head>
<body>

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

<script>
    document.getElementById('parentList').addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            console.log('You clicked on: ' + event.target.textContent);
        }
    });
</script>

</body>
</html>

在这个例子中，我们将点击事件处理程序绑定到父元素 ul 上。当用户点击列表项 li 时，事件会冒泡到 ul 元素，并且我们通过判断 event.target.tagName === 'LI' 来确定是否是点击了列表项。然后我们可以处理相应的逻辑，这样就实现了事件委托。

三、阻止冒泡

要阻止事件的冒泡（事件传播），可以使用 event.stopPropagation() 方法。当事件处理程序调用该方法时，事件将不再向上传播，即不会触发祖先元素的事件处理程序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stop Event Bubbling Example</title>
</head>
<body>

<div id="parentDiv" style="border: 1px solid black; padding: 20px;">
    <button id="childBtn">Click Me</button>
</div>

<script>
    document.getElementById('childBtn').addEventListener('click', function(event) {
        alert('Button Clicked!');
        event.stopPropagation(); // 阻止事件冒泡
    });

    document.getElementById('parentDiv').addEventListener('click', function() {
        alert('Parent Div Clicked!');
    });
</script>

</body>
</html>

在这个例子中，当点击按钮 childBtn 时，会弹出一个警报框显示 "Button Clicked!"，同时使用 event.stopPropagation() 阻止了事件冒泡。因此，即使按钮的点击事件被处理后，父元素 parentDiv 上的点击事件处理程序也不会被触发。

通过阻止事件冒泡，我们可以控制事件处理程序的执行顺序以及避免不必要的事件触发。

四、解绑事件

要解绑事件处理程序，可以使用 removeEventListener 方法。这个方法允许从特定元素上移除先前添加的事件处理程序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Remove Event Listener Example</title>
</head>
<body>

<button id="myButton">Click Me</button>

<script>
    function handleClick() {
        console.log('Button Clicked!');
    }

    // 添加点击事件处理程序
    document.getElementById('myButton').addEventListener('click', handleClick);

    // 一段时间后解绑点击事件处理程序
    setTimeout(function() {
        document.getElementById('myButton').removeEventListener('click', handleClick);
        console.log('Event listener removed.');
    }, 3000);
</script>

</body>
</html>

在这个例子中，我们首先定义了一个名为 handleClick 的函数作为点击事件处理程序。然后我们使用 addEventListener 方法将这个处理程序绑定到按钮 myButton 上。随后通过 removeEventListener 方法在3秒后解绑了点击事件处理程序。

匿名函数无法被解绑，且直接写函数名。

汓㸓

关注

20
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
事件流事件委托

事件流（Event flow）是指在 HTML 文档中发生事件时，事件的传播方式或者说流动路径。事件流描述了事件从触发元素开始，经过各个元素传递并最终到达目标元素的过程。事件流有三个阶段：捕获阶段（Capture phase）：事件从最外层的祖先元素开始向下传递，直到达到触发事件的目标元素。在捕获阶段，事件会经历所有祖先元素的捕获处理程序。目标阶段（Target phase）：事件到达目标元素，即触发事件的元素。在目标阶段，事件会触发目标元素自身绑定的事件处理程序。
复制链接

扫一扫