当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript中`addEventListener`的用法及参数详解

JavaScript中`addEventListener`的用法及参数详解

2025-07-12 13:06:33 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript的addEventListener如何使用？参数有哪些？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

JavaScript中使用addEventListener方法绑定事件监听器更推荐，因为它允许多个处理函数、提供捕获/冒泡控制并支持动态移除。① addEventListener允许同一元素同一事件绑定多个处理函数，不会覆盖；② 支持capture参数，可在捕获阶段处理事件；③ 通过removeEventListener或AbortController可精准移除监听器；④ 使用passive参数优化滚动性能；⑤ 避免内存泄漏需及时移除监听器；⑥ 推荐使用事件委托减少监听器数量；⑦ 注意this的指向问题及高频事件的节流防抖处理。相比直接赋值on事件属性，addEventListener在灵活性、可维护性和性能优化方面具有明显优势。

JavaScript的addEventListener怎么绑定事件？有哪些参数？

JavaScript中，addEventListener是给DOM元素绑定事件监听器的核心方法。简单来说，它让你能指定当某个事件（比如点击、鼠标移动、键盘输入）发生时，浏览器应该执行哪段代码。它比直接在HTML里写onclick或者在JS里用element.onclick = function() {}要强大得多，也灵活得多。

解决方案

addEventListener的基本用法是这样的：你需要一个DOM元素，然后调用它的addEventListener方法，传入三个参数：事件类型（字符串）、事件发生时要执行的函数，以及一个可选的配置对象。

// 获取一个DOM元素
const myButton = document.getElementById('myButton');

// 绑定一个点击事件监听器
myButton.addEventListener('click', function(event) {
  // 当按钮被点击时，这段代码就会执行
  console.log('按钮被点击了！');
  console.log('事件对象:', event); // event对象包含了事件的详细信息
});

// 你也可以绑定一个具名函数
function handleButtonClick(event) {
  console.log('具名函数处理了点击事件！');
  // event.target 指向触发事件的元素
  console.log('点击的元素是:', event.target);
}
myButton.addEventListener('click', handleButtonClick);

// 注意：同一个元素可以绑定多个相同类型的事件监听器，它们都会被触发。
// 这就是addEventListener相比直接赋值on事件属性的一大优势。

第一个参数是事件类型，一个字符串，比如'click'、'mouseover'、'keydown'、'submit'、'load'等等。注意，这里不需要加on前缀，直接就是事件名。

第二个参数是事件监听器函数，也就是当事件发生时会被调用的函数。这个函数会接收到一个Event对象作为参数，里面包含了事件的所有相关信息，比如事件类型、目标元素、鼠标坐标（如果是鼠标事件）等等。

第三个参数是一个可选的options对象，它能让你更精细地控制事件的行为。这个参数挺重要的，有时候能解决不少棘手的问题，或者优化性能。

addEventListener的第三个参数options有哪些常用配置？

这个options对象，在我看来，是addEventListener真正强大和灵活的地方。很多时候，我们只知道前两个参数，但深入了解第三个参数，会让你对事件处理有更深的理解和控制力。它主要有以下几个常用属性：

capture (布尔值，默认为false): 这个参数决定了事件是在“捕获阶段”还是“冒泡阶段”被处理。默认是false，意味着事件会在冒泡阶段被处理。简单来说，当一个事件发生时，它会从文档的根节点开始，一层一层向下“捕获”到目标元素，然后从目标元素开始，一层一层向上“冒泡”到根节点。如果你设置capture: true，那么这个监听器就会在捕获阶段触发，也就是事件到达目标元素之前。这在某些特定场景下非常有用，比如你想在事件冒泡到父元素之前就拦截它，或者你想在事件到达子元素之前就做些什么。
```
// 假设有一个父元素和一个子元素
const parentDiv = document.getElementById('parent');
const childButton = document.getElementById('child');

parentDiv.addEventListener('click', function() {
  console.log('父元素在冒泡阶段被点击了');
});

parentDiv.addEventListener('click', function() {
  console.log('父元素在捕获阶段被点击了');
}, { capture: true });

childButton.addEventListener('click', function() {
  console.log('子元素被点击了');
});
// 当点击子元素时，输出顺序会是：
// 父元素在捕获阶段被点击了 -> 子元素被点击了 -> 父元素在冒泡阶段被点击了
```
我个人觉得，理解捕获和冒泡对于处理复杂嵌套的DOM事件流至关重要，尤其是当你需要阻止事件传播或者进行事件委托时。
once (布尔值，默认为false): 如果设置为true，那么事件监听器在被调用一次之后就会自动移除。这对于那些只需要执行一次的事件非常方便，比如一个模态框的打开事件，或者一个初始化操作。
```
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  console.log('我只会被点击一次！');
  // 这个监听器在执行一次后就会自动消失
}, { once: true });
```
这省去了手动调用removeEventListener的麻烦，让代码更简洁。
passive (布尔值，默认为false): 这个参数主要用于优化滚动和触摸事件的性能。当设置为true时，它会告诉浏览器：这个事件监听器内部不会调用event.preventDefault()来阻止默认行为（比如滚动）。为什么这很重要？因为浏览器在处理滚动事件时，如果不知道监听器是否会阻止默认滚动，它就必须等待监听器执行完毕才能确定是否可以安全地滚动页面。这可能导致页面卡顿。有了passive: true，浏览器就可以直接滚动页面，而无需等待，从而提高滚动流畅度。
```
document.getElementById('myScrollArea').addEventListener('wheel', function(event) {
  // 这里的 event.preventDefault() 将被忽略，因为 passive 为 true
  // 如果你真的需要阻止滚动，就不能设置 passive: true
  // event.preventDefault();
  console.log('滚轮事件触发，但不会阻止滚动');
}, { passive: true });
```
对于移动端的触摸事件（touchstart, touchmove）和桌面端的wheel事件，我强烈建议在不需要阻止默认行为时都加上passive: true，它能显著提升用户体验。

signal (一个AbortSignal实例): 这是比较新的一个特性，配合AbortController使用，可以非常方便地批量或条件性地移除事件监听器。当你需要在一个组件卸载时移除所有相关的监听器，或者在某个条件满足时停止监听，AbortController就派上用场了。

const controller = new AbortController();
const signal = controller.signal;
const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  console.log('按钮被点击了，但可以随时取消监听');
}, { signal: signal });

// 比如，在5秒后，或者某个条件满足时，取消所有使用这个 signal 的监听器
setTimeout(() => {
  controller.abort(); // 触发 signal，所有绑定了它的监听器都会被移除
  console.log('监听器已被取消！');
}, 5000);

我觉得这个特性非常优雅，特别适合管理复杂应用中事件监听器的生命周期，避免内存泄漏。

为什么推荐使用addEventListener而不是直接赋值on事件属性？

在前端开发中，我经常看到一些老旧的代码，或者新手朋友在学习时，会直接用element.onclick = function() {}这样的方式来绑定事件。虽然它能工作，但在实际项目中，我几乎总是推荐使用addEventListener，原因很直接，也很重要：

允许多个事件处理函数：这是最核心的原因。如果你用element.onclick = functionA;，然后再写element.onclick = functionB;，那么functionA就会被functionB覆盖掉，只有functionB会执行。这在团队协作或者使用第三方库时简直是灾难，因为你不知道会不会有人无意中覆盖了你的事件处理逻辑。而addEventListener则允许你为同一个元素的同一个事件绑定任意多个处理函数，它们都会按照添加的顺序依次执行。这极大地提高了代码的模块化和可维护性。
```
const myDiv = document.getElementById('myDiv');

// 使用addEventListener，两个函数都会执行
myDiv.addEventListener('click', function() { console.log('第一个点击处理'); });
myDiv.addEventListener('click', function() { console.log('第二个点击处理'); });

// 如果是这样，第二个会覆盖第一个
// myDiv.onclick = function() { console.log('第一个点击处理'); };
// myDiv.onclick = function() { console.log('第二个点击处理'); };
```
更细致的事件流控制：前面提到了capture参数。直接赋值的on事件属性，只能在冒泡阶段触发事件，无法控制在捕获阶段执行。addEventListener提供了对事件捕获和冒泡阶段的完整控制，这在处理事件委托或者复杂的事件传播路径时非常关键。
方便移除事件监听器： addEventListener有对应的removeEventListener方法。如果你需要动态地添加和移除事件监听器（比如在某个条件满足时停止监听，或者在组件卸载时清理），removeEventListener是必不可少的。它需要你传入和addEventListener完全相同的事件类型、函数引用以及options对象。直接赋值的on事件属性，虽然你可以通过element.onclick = null;来移除，但如果你之前绑定的是一个匿名函数，你就没法单独移除了，因为你没有对那个函数的引用。而addEventListener鼓励你使用具名函数或者将匿名函数赋值给变量，以便后续移除。
更好的分离：将JavaScript代码和HTML结构更彻底地分离。虽然直接赋值也算是在JS里操作，但addEventListener这种模式更符合现代前端开发的最佳实践，让HTML更纯粹地负责结构，JS更纯粹地负责行为。

在我看来，选择addEventListener几乎总是正确的，它提供了更强大的功能、更好的灵活性和更清晰的代码结构，这在任何规模的项目中都是非常宝贵的。

在使用addEventListener时，如何避免常见的坑或性能问题？

虽然addEventListener非常强大，但如果不注意，也可能踩到一些坑，或者引发性能问题。作为开发者，我觉得有几个点是需要特别留意的：

内存泄漏：记得移除监听器 这是最常见的，也是最容易被忽视的问题。如果你给一个DOM元素添加了事件监听器，但这个元素后来被从DOM中移除了（比如通过innerHTML = ''或者element.remove()），而你却没有移除对应的事件监听器，那么这个监听器函数以及它所引用的变量就可能一直留在内存中，导致内存泄漏。尤其是在单页应用（SPA）中，组件的创建和销毁非常频繁，如果不及时清理，累积的监听器会严重影响应用性能。 解决方案：
- 当你移除一个DOM元素时，同时调用removeEventListener来移除其上的所有监听器。
- 如果你用的是具名函数，移除起来很简单：element.removeEventListener('click', myHandler);
- 如果你用的是匿名函数，那就得想办法了。要么把匿名函数赋值给一个变量，要么就用前面提到的AbortController，它是管理事件生命周期的利器。
- 事件委托（Event Delegation）：对于大量子元素需要监听相同事件的情况，不要给每个子元素都添加监听器。而是在它们的共同父元素上添加一个监听器，然后利用事件冒泡机制，在父元素的监听器中判断是哪个子元素触发了事件。这能大大减少监听器的数量，提高性能。
```
// 假设有一个列表 ul，里面有很多 li
const ul = document.getElementById('myList');
ul.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('点击了列表项:', event.target.textContent);
}
});
// 这样，无论有多少个 li，都只需要一个监听器
```
this的指向问题 在事件监听器函数内部，this默认指向触发事件的那个DOM元素。这通常是我们想要的。但如果你在监听器函数里使用了箭头函数，或者你的函数是在其他上下文（比如一个类方法）中定义的，那么this的指向就可能不是你预期的了。 解决方案：
- 如果你想让this指向事件目标，就用普通的函数表达式。
- 如果你想让this指向定义函数的上下文（比如一个Vue/React组件实例），可以使用箭头函数，因为箭头函数没有自己的this，它会捕获其定义时的this。
- 或者使用bind()方法来明确绑定this的指向：
```
class MyComponent {
  constructor() {
    this.button = document.getElementById('myButton');
    this.button.addEventListener('click', this.handleClick.bind(this)); // 绑定this到组件实例
  }
  handleClick() {
    console.log('组件实例的this:', this);
  }
}
new MyComponent();
```

阻止默认行为和事件传播

event.preventDefault(): 阻止事件的默认行为。比如点击标签会跳转，提交
会刷新页面。如果你想用JavaScript来处理这些行为而不希望默认行为发生，就需要调用event.preventDefault()。
```
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  console.log('链接被点击，但没有跳转');
});
```

event.stopPropagation(): 阻止事件在DOM树中向上（冒泡）或向下（捕获）传播。如果你不希望事件影响到父元素或子元素，就可以用它。

const innerDiv = document.getElementById('innerDiv');
const outerDiv = document.getElementById('outerDiv');

outerDiv.addEventListener('click', function() {
  console.log('外层div被点击');
});

innerDiv.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡到外层div
  console.log('内层div被点击');
});
// 点击内层div时，只会输出“内层div被点击”

滥用这两个方法可能会导致一些难以调试的问题，所以在使用前要清楚它们的作用和副作用。