JavaScript 事件委托

事件委托（Event Delegation）是JavaScript中一种重要的事件处理模式，它利用事件冒泡机制，将子元素的事件处理委托给父元素统一管理。

基本原理

事件委托的核心思想是：

• 不在每个子节点上单独设置事件监听器
• 而是在其父节点上设置一个事件监听器
• 利用事件冒泡机制处理子元素的事件

为什么使用事件委托

1. 性能优化：减少事件处理器的数量，节省内存
2. 动态元素：对新添加的子元素自动拥有事件处理能力
3. 简化代码：避免为多个相似元素重复绑定事件

实现方式

基本实现

document.getElementById('parent').addEventListener('click', function(event) {
    // 检查事件源是否是我们要处理的元素
    if (event.target.matches('li.child')) {
        // 处理事件
        console.log('子元素被点击:', event.target.textContent);
    }
});

更通用的实现

document.getElementById('parent').addEventListener('click', function(event) {
    let target = event.target;
    
    // 向上查找匹配的元素
    while (target !== this) {
        if (target.matches('li.child')) {
            // 找到匹配的元素，处理事件
            console.log('子元素被点击:', target.textContent);
            break;
        }
        target = target.parentNode;
    }
});

实际应用示例

动态列表处理

<ul id="todo-list">
    <li>任务1 <button class="delete">删除</button></li>
    <li>任务2 <button class="delete">删除</button></li>
    <li>任务3 <button class="delete">删除</button></li>
</ul>

document.getElementById('todo-list').addEventListener('click', function(event) {
    if (event.target.classList.contains('delete')) {
        const listItem = event.target.closest('li');
        listItem.remove();
    }
});

// 添加新项目也会自动拥有删除功能
function addNewItem(text) {
    const li = document.createElement('li');
    li.innerHTML = `${text} <button class="delete">删除</button>`;
    document.getElementById('todo-list').appendChild(li);
}

注意事项

1. 事件冒泡：不是所有事件都冒泡（如focus、blur等）
2. 事件目标：使用event.target获取最初触发事件的元素
3. 当前目标：使用event.currentTarget获取绑定事件的元素
4. 阻止冒泡：必要时使用event.stopPropagation()，但谨慎使用

优点总结

• 减少内存消耗
• 简化事件管理
• 自动适应动态添加的元素
• 代码更简洁易维护

事件委托是前端开发中优化事件处理的强大技术，特别适合处理大量相似元素或动态内容的情况。