JavaScript学习 -- 事件冒泡与事件委派（委托）

**JavaScript学习 --事件冒泡与事件委派**

在 JavaScript 中，事件是触发函数执行的关键。然而，在实际开发中，我们经常遇到一些问题，如事件的传递顺序、事件的捕捉等。在本文中，我们将讨论两个重要概念：事件冒泡和事件委派。

**事件冒泡**

事件冒泡（Bubble）是指当一个元素触发事件时，该事件会从该元素开始，向上冒泡到其父元素，然后再继续向上传递。这种机制使得我们可以在一个元素的父元素中捕捉事件，并对其进行处理。

例如，我们有一个 HTML 结构如下：

html<div id="container">
 <div id="child1">点击我</div>
 <div id="child2">点击我</div>
</div>

当我们在 `#child1` 或 `#child2` 上触发 click事件时，事件会首先冒泡到其父元素 `#container` 中。

javascript// 获取元素const container = document.getElementById('container');
const child1 = document.getElementById('child1');
const child2 = document.getElementById('child2');

// 为元素添加点击事件监听器child1.addEventListener('click', function() {
 console.log('点击了 #child1');
});

child2.addEventListener('click', function() {
 console.log('点击了 #child2');
});

container.addEventListener('click', function() {
 console.log('点击了 #container');
});

在上面的示例中，我们为 `#child1`、`#child2` 和 `#container` 都添加了 click事件监听器。当我们在 `#child1` 或 `#child2` 上触发 click事件时，事件会首先冒泡到其父元素 `#container` 中，然后再继续向上传递。

**事件委派**

事件委派（Delegation）是指将事件的处理函数绑定在一个元素上，而不是每个子元素上。这种机制可以减少内存占用和提高性能。

例如，我们有一个 HTML 结构如下：

html

 
列表项1
 
列表项2
 
列表项3

当我们在 `#list` 上触发 click事件时，我们可以将事件的处理函数绑定在 `#list` 上，而不是每个子元素上。

javascript// 获取元素const list = document.getElementById('list');

// 为列表项添加点击事件监听器list.addEventListener('click', function(event) {
 if (event.target.tagName === 'LI') {
 console.log(`点击了 ${event.target.textContent}`);
 }
});

在上面的示例中，我们将 click事件的处理函数绑定在 `#list` 上，而不是每个子元素上。当我们在列表项上触发 click事件时，事件会首先冒泡到其父元素 `#list` 中，然后再继续向上传递。

**总结**

事件冒泡和事件委派是 JavaScript 中两个重要概念。事件冒泡使得我们可以在一个元素的父元素中捕捉事件，并对其进行处理，而事件委派则可以减少内存占用和提高性能。通过理解这些概念，我们可以更好地编写高效、可维护的代码。

**参考**

* MDN Web Docs:事件冒泡* MDN Web Docs:事件委派