JavaScript基础教程（六十五）HTML DOM之EventListener：[特殊字符] 事件监听终极指南，告别onclick，拥抱addEventListener！

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

JavaScript基础教程专栏收录该内容

91 篇文章

订阅专栏

一、为什么告别传统事件处理？

传统HTML内联事件（如onclick="handler()"）和DOM0级事件（如elem.onclick=handler）存在致命缺陷：

重复绑定会覆盖前一个监听器
无法精细控制冒泡/捕获阶段
缺少移除监听的标准化方式

二、addEventListener 核心语法解密

element.addEventListener(eventType, handler, options);

第三个参数进化史：

布尔值：控制捕获（true）或冒泡（false）

对象options：支持三个关键属性

{
  capture: false,   // 是否捕获阶段触发
  once: true,       // 只触发一次后自动移除
  passive: true     // 声明不阻止默认行为（优化滚动性能）
}

三、实战示例：点击计数器与事件委托

<ul id="container">
  <li>项目1 <button class="btn">点击</button></li>
  <li>项目2 <button class="btn">点击</button></li>
</ul>

<script>
  const container = document.getElementById('container');
  let count = 0;

  // 事件委托：利用冒泡在父级统一处理
  container.addEventListener('click', function(event) {
    if(event.target.classList.contains('btn')) {
      event.target.textContent = `已点击${++count}次`;
      
      // 阻止事件继续传播
      event.stopPropagation();
    }
  }, { passive: false }); // 允许preventDefault()

  // 单次执行示例
  document.addEventListener('userLogin', () => {
    console.log('用户登录事件（只触发一次）');
  }, { once: true });
</script>

四、最佳实践与性能优化

使用事件委托：减少内存占用，动态元素无需重新绑定

及时移除监听：避免内存泄漏

const handler = () => { /* ... */ };
element.addEventListener('click', handler);
// 需要移除时
element.removeEventListener('click', handler); // 必须传入相同引用

passive模式：提升移动端滚动性能（默认无法preventDefault）

掌握现代事件监听机制，是构建复杂交互应用的基石。现在就从onclick升级到addEventListener吧！