事件冒泡、事件捕获和事件委托

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

什么是事件冒泡、事件捕获和事件委托？

事件冒泡（Event Bubbling）、事件捕获（Event Capturing）和事件委托（Event Delegation）是 JavaScript 中与事件处理相关的三个重要概念。它们涉及到事件在 DOM 树中传播和触发的方式。

1. 事件冒泡（Event Bubbling）：
   事件冒泡是指当一个元素上的事件被触发后，事件会从该元素开始沿着 DOM 树向上冒泡到更高层次的父元素，直至达到根节点。这意味着如果一个子元素上的事件被触发，其父元素上绑定的相同事件也会被触发。事件冒泡是默认的事件传播方式。

例如，如果你有以下 HTML 结构：

<div id="outer"><div id="inner">Click me!</div>
</div>

并且给 inner 和 outer 元素都绑定了相同的点击事件，当你点击 inner 元素时，事件会从 inner 元素开始向上冒泡，同时触发 outer 元素的点击事件。

2. 事件捕获（Event Capturing）：
   事件捕获是事件冒泡的另一种模式。在事件捕获中，事件会从根节点开始，依次向下沿着 DOM 树传播，直至达到事件的目标元素。然后，事件才会在目标元素上触发。

在现代浏览器中，事件传播包括两个阶段：捕获阶段和冒泡阶段。默认情况下，事件首先处于捕获阶段，然后进入目标元素，最后再冒泡到更高层次的父元素。

3. 事件委托（Event Delegation）：
   事件委托是一种利用事件冒泡原理的技术。它允许你将事件处理程序绑定到父元素而不是每个子元素上。通过在父元素上监听事件，你可以通过事件冒泡的方式捕获所有子元素上触发的事件，从而避免为每个子元素都绑定事件处理程序。

事件委托的优点是在动态添加或移除子元素时，不需要重新绑定事件处理程序，因为事件处理程序是在父元素上绑定的。这样可以减少内存消耗和提高性能。

例如，如果你有一个列表：

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

你可以在父元素 ul 上绑定点击事件，并通过事件对象（event）的 target 属性来确定实际点击的是哪个子元素：

const myList = document.getElementById('myList');myList.addEventListener('click', (event) => {if (event.target.tagName === 'LI') {console.log('Clicked item:', event.target.textContent);}
});

在上面的例子中，我们在父元素 ul 上监听点击事件，但通过 event.target 属性判断实际点击的是 li 元素，并输出被点击的项的内容。

如何阻止事件的冒泡和取消事件委托

在处理事件时，有时我们希望阻止事件的冒泡或取消事件委托。这可以通过事件对象的方法来实现。以下是如何屏蔽事件冒泡和事件委托的方法：

1. 屏蔽事件冒泡（Stop Event Bubbling）：
   使用 event.stopPropagation() 方法可以阻止事件继续向上冒泡，从而阻止父元素上绑定的相同事件的触发。

const button = document.getElementById('myButton');button.addEventListener('click', (event) => {event.stopPropagation();// 处理按钮点击事件，但不会触发父元素上的点击事件
});

在上面的例子中，当按钮被点击时，event.stopPropagation() 方法将阻止点击事件冒泡到父元素，从而不会触发父元素上的点击事件。

2. 取消事件委托（Prevent Event Delegation）：
   使用 event.preventDefault() 方法可以取消事件的默认行为，从而阻止事件委托的触发。通常用于链接的点击、表单的提交等。

const myList = document.getElementById('myList');myList.addEventListener('click', (event) => {event.preventDefault();// 取消事件委托，不会触发链接的默认跳转行为
});

当列表项（li）内部有链接时，event.preventDefault() 方法将阻止链接的默认跳转行为，即点击链接不会跳转到新页面。

请注意，阻止事件冒泡或取消事件委托可能会影响到事件传播的正常流程。确保在适当的时候使用这些方法，避免过度使用导致不可预料的问题。

在实际应用中，你可以根据具体情况在事件处理程序中使用 event.stopPropagation() 和 event.preventDefault() 方法，以实现事件冒泡和事件委托的控制。