事件监听是实现 JavaScript 与用户交互的核心机制，通过捕获并响应 DOM 元素上的事件行为（如点击、输入、滚动等），可构建动态交互界面。以任务列表交互为典型场景，我们将系统探讨事件监听的基础实现与进阶优化方案。

一、事件监听基础实现

通过 addEventListener 方法可给 DOM 元素绑定事件监听函数，其语法为 target.addEventListener(type, listener, options)，其中：

• type：事件类型字符串（如 'click'、'mouseover'）；
• listener：事件触发时执行的回调函数，浏览器会自动传入事件对象（通常以 e 为参数名）；
• options：可选配置对象（如是否捕获阶段触发），默认值为 false（冒泡阶段触发）[39]。

事件监听语法要点

• 事件对象 e 包含事件相关信息，如触发元素（e.target）、事件类型（e.type）等；
• 同一元素可绑定多个不同类型事件，或同一事件类型绑定多个回调函数；
• 需通过 removeEventListener 手动移除不再需要的监听器，避免内存泄漏。

任务列表静态交互案例：给现有任务项（li 元素）绑定点击事件，通过 e.target 区分具体点击的任务项：

// 假设页面已有3个任务项 <li>任务1</li>、<li>任务2</li>、<li>任务3</li>
const taskItems = document.querySelectorAll('ul li');
taskItems.forEach(li => {
  li.addEventListener('click', (e) => {
    // e.target 指向被点击的 li 元素
    console.log(`点击了任务：${e.target.textContent}`);
    e.target.classList.toggle('completed'); // 切换任务完成状态
  });
});

二、动态元素的事件处理挑战

上述静态绑定方案存在明显局限：当通过 JavaScript 动态添加新任务项（如点击“添加任务”按钮生成新 li）时，新元素未绑定事件监听，需重新执行绑定逻辑。若任务列表规模庞大（如百级以上任务项），频繁绑定/解绑事件会导致性能损耗，且代码维护成本增加。

三、事件委托：优化动态元素交互

事件委托利用 DOM 事件冒泡机制，将子元素的事件监听统一绑定到父元素上，通过判断事件源（e.target）的类型或特征，间接处理子元素事件。此模式可避免为每个子元素单独绑定监听器，显著提升性能。

任务列表动态交互优化：给父容器 ul 绑定点击事件，通过 e.target.tagName 判断是否点击了 li 元素：

// 给父元素 ul 绑定事件委托
document.querySelector('ul').addEventListener('click', (e) => {
  // 检查事件源是否为 li 元素（tagName 返回大写字母，需用 'LI' 匹配）
  if (e.target.tagName === 'LI') {
    console.log(`点击了动态任务：${e.target.textContent}`);
    e.target.classList.toggle('completed');
  }
});

事件委托核心优势：

1. 性能优化：减少事件监听器数量（从 N 个减少为 1 个），降低内存占用；
2. 动态适配：新增子元素无需重新绑定事件，自动继承父元素的委托逻辑；
3. 代码简洁：统一事件处理逻辑，便于维护和扩展。

四、实践对比与适用场景

综上，事件监听是交互开发的基础，而事件委托则是优化动态场景性能的关键策略。在实际开发中，应根据元素的动态性与数量选择合适方案，平衡开发效率与运行性能。