js事件委托实现
事件委托的原理
事件委托利用事件冒泡机制，将子元素的事件监听绑定到父元素上。通过事件对象的target属性识别实际触发事件的子元素，减少事件监听器的数量，提升性能。
实现步骤
绑定父元素监听器
为父元素添加事件监听，指定事件类型（如click）和回调函数。父元素需是子元素的共同祖先节点。
document.getElementById('parent').addEventListener('click', function(event) {
// 事件处理逻辑
});识别目标子元素
通过event.target获取实际触发事件的子元素，结合条件判断（如tagName、classList）筛选目标。
if (event.target.classList.contains('child-class')) {
// 处理特定子元素的逻辑
}动态元素支持
事件委托天然支持动态添加的子元素，无需重新绑定监听器。新子元素触发事件时会冒泡到父元素。
完整代码示例
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.classList.contains('item')) {
console.log('Clicked item:', event.target.textContent);
}
});
// 动态添加的子元素自动生效
setTimeout(() => {
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 3';
document.getElementById('list').appendChild(newItem);
}, 1000);
</script>注意事项
- 使用
event.currentTarget获取绑定监听器的父元素，event.target获取触发事件的原始元素。 - 若子元素内还有嵌套结构，需通过
event.target.closest('.selector')向上查找匹配的祖先元素。 - 避免过度委托，仅对同类操作（如列表项点击）使用事件委托。
