Skip to content

事件监听器

JavaScript 基础

一句话解释

事件监听器是绑定在元素上、当指定事件发生时自动运行的函数，通过 `addEventListener` 注册。

用大白话说

事件监听器（event listener）就是“等着某个事件发生、发生了就执行”的函数。你用 addEventListener 把它绑定到某个元素上。

button.addEventListener("click", handleClick);

意思是“在 button 上，监听 click 事件，事件发生时调用 handleClick”。这里的 handleClick 就是事件监听器，也叫“事件处理函数”。

监听器接收一个事件对象参数，里面有事件的所有信息：哪个元素触发的、鼠标坐标、按了哪个键等。你可以用它做更精细的处理。

不需要时可以用 removeEventListener 解绑，避免内存泄漏。一个元素可以绑多个监听器，同一个事件也能绑多个处理函数，会按绑定顺序依次执行。

示例

javascript
const btn = document.querySelector("#myBtn");
function handleClick(e) {
  console.log("点了！", e.type); // "click"
}
btn.addEventListener("click", handleClick);
// 不需要时解绑
// btn.removeEventListener("click", handleClick);

addEventListener 把处理函数绑定到元素的指定事件。事件发生时，处理函数被调用，参数 e 是事件对象。

工作原理

  1. 用 addEventListener(事件名, 处理函数) 绑定
  2. 事件发生时，浏览器调用处理函数
  3. 处理函数收到一个事件对象参数，包含事件详情
  4. 用 removeEventListener 可以解绑

常见混淆

  • 容易混淆的对象: 回调函数

    关键区别: 事件监听器是一种特殊的回调——专门响应 DOM 事件。回调是更广义的概念，任何“把函数当参数传、回头调用”都是回调。

相关术语

相关资源

相关课程

相关项目

学习基础知识

通过结构化课程深入理解这个主题。

查看课程

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误

← 返回术语表