如何正确使用 addEventListener 方法

本文详解 addEventListener 的基本用法与常见错误，重点解决因 DOM 元素未获取成功（返回 null）导致的 “Cannot read properties of null” 报错，并提供安全、健壮的事件绑定实践方案。

在 Ja vaScript 的世界里，事件驱动是交互的灵魂，而 `addEventListener` 则是赋予这灵魂的钥匙。它支持解耦、复用，也支持对事件捕获或冒泡的精细控制，可以说是前端开发的基石。但不少开发者在初次使用时，总会遇到一个经典的拦路虎：控制台赫然显示着 “Cannot read properties of null (reading ‘addEventListener’)” 的错误。

这行报错信息其实已经把答案说出来了：你试图在一个值为 null 的对象上调用 `addEventListener` 方法。那么，null 从何而来？十有八九，是 `document.getElementById()` 或 `querySelector()` 这些 DOM 查询方法空手而归了。元素没找到，自然就无法绑定事件。

✅ 告别报错：确保元素存在与执行时机

先从一份标准的 HTML 结构看起：

  


  Start Test
  Stop Test
  
  

关键在于与之配合的 Ja vaScript 脚本：

// ✅ 安全第一：先检查，再操作
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');

if (startBtn) {
  startBtn.addEventListener('click', startTest);
} else {
  console.warn('⚠️ #startBtn not found in DOM');
}

if (stopBtn) {
  stopBtn.addEventListener('click', stopTest);
} else {
  console.warn('⚠️ #stopBtn not found in DOM');
}

function startTest() {
  console.log('Test started!');
}
function stopTest() {
  console.log('Test stopped!');
}

看到没有？在调用 `addEventListener` 之前，先用一个简单的 `if` 语句判断元素是否存在。这个简单的防御性编程习惯，能立刻让你的代码健壮性提升一个等级。

⚠️ 绕过那些常见的“坑”

• 时机就是一切：脚本的执行顺序
  一个最常见的错误是，将 `

• 魔鬼在细节：ID 拼写与大小写
  别小看这个问题。HTML 里写的是 `id=”startBtn"`，Ja vaScript 里查询时就必须是 `‘startBtn’`。一个字母的大小写错误，就足以让你面对恼人的 null。

• 避免“幽灵”点击：重复绑定的陷阱
  多次对同一元素执行相同的 `addEventListener`，会注册多个独立的监听器。结果是，点击一次按钮，处理函数可能被调用多次。如果需要更新逻辑，记得先用 `removeEventListener` 进行清理，或者用一个函数引用变量来统一管理。