117笔记问答在 JavaScript 中，事件委托（Event delegation）是一种降低事件处理器数量的技术。通过将事件监听器添加到父元素上，而不是每个子元素上，可以利用事件冒泡机制捕获子元素触发的事件。当事件触发时，可以通过检查事件对象的 target 属性来判断实际触发事件的元素，并执行相应的处理函数。
以下是一个简单的示例，演示了如何在 JavaScript 中使用事件委托：
HTML 结构：
- Item 1
- Item 2
- Item 3
JavaScript 代码：
// 获取父元素引用
const list = document.getElementById('list');
// 定义事件处理函数
function handleClick(event) {
// 检查触发事件的元素是否是 li 子元素
if (event.target.tagName === 'LI') {
console.log(`Clicked on ${event.target.textContent}`);
}
}
// 为父元素添加事件监听器
list.addEventListener('click', handleClick);
在这个示例中，我们将事件监听器添加到了 id 为 list 的 ul 元素上。当点击列表中的任意一个 li 子元素时，都会触发 handleClick 函数。在函数内部，我们通过检查 event.target 的标签名来判断实际触发事件的元素，并输出相应的文本。这样，我们就实现了事件委托，降低了事件处理器的数量。