掌握 JavaScript 事件委托的核心原理与实战技巧
在 JavaScript 中,delegate(事件委托)是一种利用事件冒泡机制,将多个子元素的事件监听器委托给其父元素统一处理的技术。
它特别适用于动态添加或删除的元素,避免为每个新元素重复绑定事件处理器。
以下是一个使用事件委托处理列表点击的简单例子:
// HTML
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
// JavaScript
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
alert('你点击了:' + e.target.textContent);
}
});
点击下方按钮动态添加列表项,再点击任意列表项查看事件委托效果:
e.target 的类型或类名,确保只响应目标元素。data-* 属性传递额外信息,提高灵活性。