如何正确使用 addEventListener 绑定事件监听器-js教程-PHP中文网

如何正确使用 addEventListener 绑定事件监听器

本文详解 addEventListener 的基本用法、常见错误（如“Cannot read properties of null”）及解决方案，涵盖元素获取时机、DOM 就绪检查、函数定义顺序等关键实践要点。

本文详解 `addeventlistener` 的基本用法、常见错误（如“cannot read properties of null”）及解决方案，涵盖元素获取时机、dom 就绪检查、函数定义顺序等关键实践要点。

在 Web 开发中，addEventListener() 是为 DOM 元素绑定交互行为的核心方法。但初学者常遇到类似以下报错：

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

该错误本质是：你试图对 null 值调用 addEventListener —— 换言之，JavaScript 未能成功获取到目标元素。

✅ 正确使用步骤

1. 确保 HTML 元素已存在且 ID 匹配

例如，HTML 中需明确定义带 id 的按钮：

<button id="startBtn">开始测试</button>
<button id="stopBtn">停止测试</button>

⚠️ 注意：id 值必须严格一致（区分大小写），且全局唯一。

2. 在 DOM 加载完成后获取元素

若 JavaScript 代码位于

中或执行过早，document.getElementById() 可能返回 null（因为对应 HTML 尚未解析）。推荐以下任一方式确保安全：

方式一：将 <script> 放在之前</script>

<!-- HTML body 内容 -->
<button id="startBtn">开始测试</button>
<script src="script.js"></script><!-- 此时 DOM 已就绪 -->

方式二：使用 DOMContentLoaded 事件

document.addEventListener('DOMContentLoaded', () => {
  const startBtn = document.getElementById('startBtn');
  const stopBtn = document.getElementById('stopBtn');

  if (startBtn) {
    startBtn.addEventListener('click', startTest);
  }
  if (stopBtn) {
    stopBtn.addEventListener('click', stopTest);
  }
});

方式三：使用 defer 属性（推荐用于外部脚本）
```
<script src="script.js" defer></script>
```

3. 确保回调函数已正确定义

startTest 和 stopTest 必须在 addEventListener 调用前声明（函数声明会提升，函数表达式则需注意顺序）：

// ✅ 推荐：函数声明（自动提升）
function startTest() {
  console.log('测试已启动');
}

function stopTest() {
  console.log('测试已停止');
}

// ✅ 或使用函数表达式（需确保在 addEventListener 之前执行）
const startTest = () => console.log('测试已启动');
const stopTest = () => console.log('测试已停止');

4. 添加空值防护（增强健壮性）

即使做了上述准备，仍建议显式校验元素是否存在：

const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');

if (!startBtn) console.warn('未找到 #startBtn 元素');
if (!stopBtn) console.warn('未找到 #stopBtn 元素');

startBtn?.addEventListener('click', startTest); // 可选链操作符（ES2020+）
stopBtn?.addEventListener('click', stopTest);