JavaScript 中的事件委托是一种技术，它允许我们将单个事件侦听器附加到父元素，然后使用事件对象来确定哪个子元素触发了事件。这样，我们就可以用一个事件监听器处理多个事件，避免向 DOM 添加太多的事件监听器。
事件委派的步骤
1. 将侦听器附加到共同上级
将单个事件侦听器附加到父元素，封装要监视的元素;这代替了为每个元素附加单独的事件侦听器。使用 addEventListener 等方法实现高效。
2. 检查 Target Element
检查事件处理程序中的 event.target 属性，以查明在其共同祖先中触发它的特定元素。常见检查包括仔细检查 tagName、classList 或其他目标元素属性。
3. 执行所需的操作
根据标识的目标元素和任何指定的条件，执行所需的操作或功能。这可能涉及修改内容、处理按钮单击或执行与事件关联的任何自定义逻辑。
事件委派示例
示例：列表项单击
在此示例中，我们使用事件委派来熟练地管理动态变化的教程列表的点击。作为所有列表项的共享祖先的 <ul> 元素附加了一个单独的事件侦听器。
单击教程后，<li> 通过我们精心设计的事件处理程序将自己标识为目标;因此，在 Console 中启用该特定教程内容的日志记录。这演示了在管理动态列表时事件委派的简化和可扩展方法。
<!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 开发中的一种通用技术。
