什么是事件委托？
在JavaScript中，事件委托是指将事件处理程序绑定到其父元素上，以处理其子元素触发的事件。通过使用事件委托，可以减少对每个子元素分别绑定事件处理程序的工作，提高代码的效率和可维护性。
实现原理
事件委托利用了事件冒泡机制。当子元素的事件触发时，事件会一层一层地向上冒泡到其父元素，再冒泡到祖父元素，直到到达根元素或被处理掉。通过将事件处理程序绑定到父元素上，我们可以利用事件冒泡机制来捕获并处理子元素的事件。
实现事件委托的关键是通过事件对象的event.target属性来判断事件源（即实际触发事件的元素），从而确定应该执行哪个事件处理程序。
应用场景
1. 动态添加的元素
当我们需要对页面上动态添加的元素进行事件绑定时，事件委托就能派上用场。相比于为每个动态添加的元素单独绑定事件处理程序，我们只需要将事件处理程序绑定到它们的父元素上，即可统一处理所有事件。
// HTML
<ul id="dynamic-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
// JavaScript
const list = document.getElementById("dynamic-list");
list.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
console.log("You clicked on item: " + event.target.innerText);
}
});
上述代码中，我们为dynamic-list父元素绑定了click事件处理程序。当我们点击列表中的任意子元素时，事件会冒泡到父元素，然后通过判断event.target.tagName是否为LI来确定是子元素触发的事件。这样，我们就能在控制台打印出所点击的列表项内容。
2. 性能优化
当页面上有大量相同类型的元素需要绑定相同事件处理程序时，使用事件委托可以大大提高性能。通过将事件处理程序绑定到父元素上，减少了绑定事件处理程序和处理事件的次数，从而减轻了页面和浏览器的负担。
// HTML
<ul id="performance-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...
<li>Item 1000</li>
</ul>
// JavaScript
const list = document.getElementById("performance-list");
list.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
console.log("You clicked on item: " + event.target.innerText);
}
});
在上述代码中，我们为performance-list父元素绑定了click事件处理程序。无论是点击列表中的第一个子元素还是最后一个子元素，事件都会通过冒泡机制到达父元素，并执行事件处理程序。这样，我们就可以避免为每一个列表项都绑定事件处理程序，大大提高了性能。
总结
通过使用事件委托，我们可以将事件处理程序绑定到父元素上，以处理子元素触发的事件。这样一来，我们可以在代码中少写很多事件处理程序，优化代码结构和性能。事件委托利用了事件冒泡机制，通过判断事件源来确定应该执行哪个事件处理程序。无论是动态添加的元素还是大量相同类型的元素，事件委托都能很好地应用于各种场景。在开发过程中，我们应该充分利用事件委托来提高代码的效率和可维护性。
本文来自极简博客，作者：绿茶清香，转载请注明原文链接：JavaScript中的事件委托实现原理与应用
