如何使用EventListener？网站运行遇Uncaught TypeError报错求助

报错原因 #

这个错误的核心是startBtn或stopBtn的值为null——JS代码找不到对应的DOM元素，常见原因有两个：

• JS代码在DOM元素加载完成前就执行了，浏览器还没解析到目标按钮
• HTML中不存在对应ID的按钮，或者代码里写错了元素的ID/选择器

解决办法 #

1. 把JS代码放在HTML末尾 #

将<script>标签放在</body>闭合标签之前，确保浏览器先加载所有DOM元素再执行JS：

<body>
  <!-- 页面内容，包含按钮元素 -->
  <button id="startBtn">开始测试</button>
  <button id="stopBtn">停止测试</button>
  
  <!-- JS代码放在这里 -->
  <script src="script.js"></script>
</body>

2. 监听DOM加载完成事件 #

如果不想移动JS文件位置，就用DOMContentLoaded事件，在DOM完全加载后再获取元素并绑定事件：

document.addEventListener('DOMContentLoaded', function() {
  // 先获取DOM元素
  const startBtn = document.getElementById('startBtn');
  const stopBtn = document.getElementById('stopBtn');
  
  // 再绑定事件
  startBtn.addEventListener("click", startTest);
  stopBtn.addEventListener("click", stopTest);
});

注意：必须确保HTML里存在对应ID的按钮元素，比如上面代码对应<button id="startBtn">和<button id="stopBtn">。

addEventListener正确使用方法 #

基本语法 #

element.addEventListener(eventType, callback, options);

• element：要绑定事件的DOM元素
• eventType：事件类型字符串，比如click、mouseover、keydown，不要加on前缀
• callback：事件触发时执行的函数，支持命名函数或匿名函数
• options（可选）：配置对象，比如{once: true}让事件只触发一次，或布尔值控制事件捕获/冒泡

常用示例 #

绑定命名函数

function startTest() {
  console.log('测试开始');
}
const startBtn = document.getElementById('startBtn');
startBtn.addEventListener('click', startTest);

绑定匿名函数

stopBtn.addEventListener('click', function() {
  console.log('测试停止');
});

移除事件监听

要移除事件，必须传入绑定时候的同一个函数引用（匿名函数无法移除）：

// 移除上面的startTest事件监听
startBtn.removeEventListener('click', startTest);

事件只触发一次

通过options参数设置once: true，事件触发后自动解绑：

startBtn.addEventListener('click', startTest, {once: true});

内容的提问来源于stack exchange，提问作者Vishal Bhatia