JavaScript 怎么给元素添加事件监听？附 2 种常用方法讲清楚

给网页元素加交互，最常用就是事件监听：本质是JavaScript 事件监听把某个事件和处理函数绑到元素上，元素被点击、输入或悬浮时，这个函数就会自动执行。实际开发里主要有两种写法，一种用 addEventListener 在脚本里绑定，另一种直接在 HTML 标签上写 on 事件属性。今天这篇文章，编程狮就把这两种 JavaScript 事件监听的写法一次讲透，帮你选对、写好、少踩坑。不管是按钮点击、表单提交还是鼠标悬浮，只要你想让用户操作触发代码，事件监听都是绕不开的第一步。

一、先搞懂：事件监听到底在“听”什么

网页上的按钮不是天生就会“被点击就有反应”的。它只是一个静态的元素，需要有人告诉它：当某件事发生的时候，去执行一段代码。这件事，就叫做“事件”；而“监听”，就是一直盯着这个元素，等事件发生就触发对应的函数。

常见的事件有很多种：用户用鼠标点一下是 click，把鼠标移上去是 mouseover，在输入框里敲键盘是 keydown，页面加载完是 load，表单提交是 submit。事件监听的作用，就是给某个元素“挂”上一个监听器，一旦对应的事件发生，浏览器就会自动调用你写好的那个函数。

理解了这个前提，后面的两种写法就只是“把监听挂上去”的不同方式而已。想系统补 JavaScript 基础，JavaScript 教程里对事件模型和 DOM 的讲解很完整，建议搭配着看。JavaScript 事件监听的核心价值，正是把“用户动作”和“代码反应”稳稳连起来。

二、方法一：用 addEventListener 绑定（最推荐）

这是现代开发里最常用、也最推荐的写法。你先在脚本里拿到元素，再调用它的 addEventListener 方法，第一个参数传事件名，第二个参数传要执行的函数。

// 先拿到按钮元素
const btn = document.getElementById("myBtn");


// 给它绑定一个点击事件
btn.addEventListener("click", function () {
  alert("你点了我！");
});

上面这段里，addEventListener 的第一个参数是字符串 "click"，表示监听“点击”这个事件；第二个参数是一个函数，事件发生时浏览器就会调用它。这种写法的好处特别明显：同一个元素、同一个事件，可以绑定多个处理函数，它们会按顺序依次执行，互不覆盖。

btn.addEventListener("click", function () {
  console.log("第一个处理函数");
});
btn.addEventListener("click", function () {
  console.log("第二个处理函数");
});

事件监听示意图

它还有一个很大的优势：能在捕获或冒泡阶段精细控制（第三个参数可以传 true/false），也能用 removeEventListener 把监听精准摘掉，不会出现“想取消却取消不掉”的尴尬。处理数组类数据时，JS 数组去重这篇文章里也用到了类似的事件思路，可以对照着理解。

三、方法二：在 HTML 标签上写 on 事件属性（最直接）

第二种写法更“直白”：你直接在 HTML 标签里写一个以 on 开头的属性，属性值就是事件发生时要执行的代码。比如 oncl方法对应点击，onmouseover 对应鼠标移入。

<button onclick="alert('你点了我！')">点我</button>

上面这段里，onclick 是 HTML 的事件属性，它的值是一段 JavaScript 代码，浏览器会在按钮被点击时直接执行。这种写法的优点是上手极快，写个小 demo、做个临时按钮特别方便，所见即所得。

但要注意，on 属性方式有个绕不开的缺点：同一个事件属性，后面写的会覆盖前面写的。比如你既在 HTML 里写了 onclick，又在脚本里用 btn.onclick = ... 重新赋值，那 HTML 里那一段就被顶掉了，页面上只会执行最后那一个。所以它更适合“一个元素只挂一个简单行为”的场景。

四、两种写法怎么选，以及两个常见坑

选型其实很简单：正式项目、需要绑定多个处理函数、或者要动态增删监听时，一律用 addEventListener；只是随手做个小例子、临时验证一个想法，用 on 属性图省事也完全没问题。一句话记住：JavaScript 事件监听的两种写法没有绝对优劣，只有合不合场景。

坑一：拿元素拿早了，监听挂不上。 如果你的 script 写在 <head> 里，而按钮在 <body> 后面，脚本执行时按钮还不存在，getElementById 会返回 null，addEventListener 直接报错。解决办法是把脚本放到 body 末尾，或者用 DOMContentLoaded 事件等页面加载完再绑定。

坑二：this 指向理解错。 在 addEventListener 的函数里，this 指向“被绑定的那个元素”；但在 on 属性里直接写代码时，this 的指向容易和你的预期不一致。新手如果搞混，经常会出现“明明点了 A，却改了 B”的 bug。关于调试这类问题，JS 控制台入门讲了怎么用 Console 快速定位，建议收藏。

💡 小提示：事件名在 addEventListener 里是小写字符串（如 "click"），而 on 属性是大写开头（onclick）。这两处大小写不一致，是常见的复制粘贴报错来源，写的时候多留一眼。

总结

JavaScript 事件监听，说到底就是“让元素在事件发生时自动执行函数”。两种写法各有所长：addEventListener 灵活、可叠加、可移除，是正式开发的首选；on 事件属性直白、上手快，适合临时和小场景。请记住最核心的一点——正式项目优先用 addEventListener，别为了省事把逻辑都堆到 HTML 标签上，后续维护和调试会轻松很多。把 JavaScript 事件监听用熟，你才算真正踏进了前端交互的大门。

常见问题

Q：一个按钮能不能同时绑定多个点击事件？
A：能。用 addEventListener 可以给同一个元素的同一个事件挂多个处理函数，它们会按绑定顺序依次执行；但用 on 属性方式的话，后写的会覆盖先写的，只能保留最后一个。

Q：addEventListener 第三个参数 true 和 false 有什么区别？
A：它控制事件在“捕获阶段”还是“冒泡阶段”触发。false（默认）表示在冒泡阶段处理，true 表示在捕获阶段处理。绝大多数业务场景用默认的 false 就够了，只有在需要精细控制父子元素事件顺序时才用 true。

Q：怎么把已经绑定的监听取消掉？ A：用 removeEventListener，并且传入的函数必须和绑定时的同一个引用（不能用匿名函数凑数）。on 属性方式则直接把对应的 on 属性赋值为 null 即可解除。

延伸学习

想把前端基础打得更牢，可以按这个顺序来：

先过一遍 JavaScript 教程，把 DOM、事件、函数这些根基铺平；
具体语法和属性记不住时，JavaScript 速查手册能随时翻查；
想跟着视频边看边练，JavaScript 入门课是循序渐进的形式，适合巩固上手。