事件委托是一种技术，它允许我们将一个单一的事件监听器附加到父元素上，然后使用事件对象来确定哪个子元素触发了事件。这样，我们可以用一个事件监听器来处理多个事件，避免向 DOM 添加过多的监听器。
事件委托步骤
1. 附加上层监听器
将一个单一的事件监听器附加到一个父元素上，这个父元素包含了你希望监控的所有子元素。这样做是为了避免为每个子元素单独添加事件监听器。可以使用 addEventListener 方法来高效地实现这一点。
2. 检查目标元素
在事件处理器中检查 event.target 属性，以确定具体哪个子元素在其共同的祖先元素中触发了事件。通常会检查 tagName, classList 或者其他的目标元素属性。
3. 执行所需操作
根据识别出的目标元素及其任何指定的标准，执行所需的行动或功能。这可能包括修改内容、处理按钮点击或执行与事件相关的任何自定义逻辑。
事件委托示例
示例：列表项点击
在这个例子中，我们使用事件委托来有效地管理一个动态变化的教程列表的点击事件。所有的列表项 <li> 都有一个共同的祖先 <ul> 元素，我们只在这个 <ul> 上附加了一个事件监听器。
当点击某个教程时，通过精心编写的事件处理器，<li> 自己标识为目标，从而使那个特定教程的内容被记录到控制台中。这展示了事件委托在管理动态列表时的简洁性和可扩展性。
<!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-type: none; padding: 0;}
li {margin: 5px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
max-width: 30%;
}
</style>
</head>
<body>
<ul id="myList">
<li>Tutorial 1</li>
<li>Tutorial 2</li>
<li>Tutorial 3</li>
<li>Tutorial 4</li>
<li>Tutorial 5</li>
</ul>
<div id = "output"></div>
<script>
const output = document.getElementById("output");
const myList = document.getElementById("myList");
myList.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
output.innerHTML += "Tutorial clicked: " + event.target.textContent + "<br>";
}
});
</script>
</body>
</html>
示例：表单控件更改
在这里使用事件委托可以监控并记录表单控件值的变化：<form> 元素作为共同的祖先，而输入事件监听器捕获输入字段内的更改。脚本通过在其处理器中检查目标元素来确认事件确实与 <input> 相关。随后，记录下修改后的输入的名字和新值：这不仅展示了事件委托的灵活性，还展示了其在管理动态表单交互方面的效率。
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="button">Submit</button>
</form>
<div id="message"></div>
<script>
const messageElement = document.getElementById("message");
const myForm = document.getElementById("myForm");
myForm.addEventListener("input", function(event) {
if (event.target.nodeName === "INPUT") {
messageElement.innerHTML += "Input changed: " + event.target.name + " - New value: " + event.target.value+'<br>';
}
});
</script>
</body>
</html>
事件委托在那些可以通过单个事件监听器高效管理多个元素交互的情况下非常有价值，减少冗余并提高性能。常见的应用场景包括处理动态列表、表单交互、表格动作、手风琴或标签界面、树形结构、下拉菜单、多步骤向导、轮播图以及各种互动 UI 组件。它简化了代码结构，确保一致性，并且很好地适应了动态内容的变化，使其成为 Web 开发中的一种多功能技术。