事件处理与委托

JavaScript事件机制是前端交互核心，掌握事件流与委托模式至关重要。

事件流

三个阶段

addEventListener 第三个参数

// 冒泡阶段（默认）
element.addEventListener('click', handler, false);

// 捕获阶段
element.addEventListener('click', handler, true);

事件对象

常用属性

element.addEventListener('click', function(e) {
    e.target;          // 触发事件的元素
    e.currentTarget;   // 绑定事件的元素
    e.type;            // 事件类型
    e.preventDefault(); // 阻止默认行为
    e.stopPropagation(); // 阻止冒泡
});

target vs currentTarget

ul.addEventListener('click', function(e) {
    console.log(e.target);        // 实际点击的li
    console.log(e.currentTarget); // ul本身
});

事件委托

基本原理

利用事件冒泡，在父元素上统一管理子元素事件。

// 传统方式：每个li绑定事件
document.querySelectorAll('li').forEach(li => {
    li.addEventListener('click', handler);
});

// 事件委托：父元素统一处理
ul.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log(e.target.textContent);
    }
});

匹配最近祖先元素

ul.addEventListener('click', function(e) {
    const li = e.target.closest('li');
    if (li) {
        console.log(li.dataset.id);
    }
});

动态元素处理

// 新增元素自动拥有事件处理
ul.addEventListener('click', function(e) {
    const btn = e.target.closest('.delete-btn');
    if (btn) {
        btn.parentElement.remove();
    }
});

// 动态添加元素
ul.insertAdjacentHTML('beforeend', '<li>新项</li>');

常见应用场景

表格操作

table.addEventListener('click', function(e) {
    const row = e.target.closest('tr');
    if (!row) return;

    if (e.target.classList.contains('edit')) {
        editRow(row.dataset.id);
    } else if (e.target.classList.contains('delete')) {
        deleteRow(row.dataset.id);
    }
});

按钮组

toolbar.addEventListener('click', function(e) {
    const btn = e.target.closest('button');
    if (!btn) return;

    const action = btn.dataset.action;
    switch(action) {
        case 'save': save(); break;
        case 'copy': copy(); break;
    }
});

注意事项

• 事件委托依赖冒泡，focus/blur等不冒泡事件需使用捕获或focusin/focusout
• 过度委托可能导致判断逻辑复杂，合理划分委托范围
• e.target可能是子元素，使用closest()查找目标元素

要点总结

• 事件流分为捕获、目标、冒泡三阶段
• target是触发元素，currentTarget是绑定元素
• 事件委托利用冒泡在父元素统一处理
• 委托适合动态元素和大量相似元素场景
• 使用closest()处理嵌套元素匹配

存放路径：articles/JS/进阶/浏览器与DOM高级/事件处理与委托.md