当使用JavaScript编写交互性网页时，我们经常需要处理用户的各种事件，例如点击、滚动、鼠标移动等等。事件委托（event delegation）和事件冒泡（event bubbling）是JavaScript中两个重要的概念，在处理事件时非常有用。本文将介绍这两个概念以及它们的用例。
事件冒泡
事件冒泡是指当一个元素上的事件被触发时，其父级元素也会依次接收到该事件。这意味着，如果你在一个具有层级关系的DOM结构中点击了最底层的元素，该事件会一直冒泡到最顶层的父元素上。
例如，假设有一个HTML结构如下：
<div id="outer">
<div id="inner">
<button id="button">按钮</button>
</div>
</div>
当点击按钮时，事件会一直冒泡到#inner和#outer上。
事件冒泡有助于在代码中实现事件的触发传递和处理层叠效果。可以使用addEventListener函数来监听事件，并通过event.target属性获取触发事件的目标元素。
var outer = document.getElementById('outer');
outer.addEventListener('click', function(event) {
console.log('点击了 #outer 元素');
console.log('触发事件的目标元素：', event.target);
});
事件委托
事件委托是指将事件处理程序绑定到元素的祖先元素上，而不是直接绑定到目标元素。这样做的好处是可以简化事件的管理。相比为每个子元素都添加事件处理程序，只需将事件委托给公共的祖先元素即可。
事件委托的原理是利用了事件冒泡，在目标元素上触发事件后，由于冒泡的特性，事件会一直向上冒泡到祖先元素，从而被祖先元素捕获到。
例如，假设有一个无序列表，并且需要在单击列表项时弹出警告框：
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
可以通过事件委托来实现：
var list = document.getElementById('list');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('点击了列表项：' + event.target.textContent);
}
});
在上述代码中，只需向父元素<ul>添加事件处理程序，然后通过event.target判断触发事件的元素是否为<li>元素，然后执行相应的操作。
事件委托不仅简化了代码，还有助于提高性能。当动态添加或移除子元素时，无需单独处理每个子元素的事件监听器，只需在父元素上添加或移除事件监听器即可。
结论
事件委托和事件冒泡是JavaScript中非常有用的概念。通过合理利用事件委托和事件冒泡，可以更加高效地管理事件，并简化代码。理解这两个概念并在合适的场景中使用它们，将为你的交互性网页开发带来很大的便利性。
本文来自极简博客，作者：指尖流年，转载请注明原文链接：JavaScript中的事件委托和事件冒泡
