前端如何正确的添加、销毁全局事件监听

最新推荐文章于 2026-06-22 13:33:02 发布

原创最新推荐文章于 2026-06-22 13:33:02 发布 · 8.6k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

技术分享

前端

本文详细讲解了在前端开发中，如何正确地添加和销毁全局事件监听，避免内存泄露和性能问题。重点介绍了addEventListener的使用技巧，包括参数设置、匿名函数的避免，以及监听器的适时销毁。

在前端编码中，经常会通过addEventListener来添加全局的事件监听，但是，这种全局的事件监听方法若使用不当，很容易造成严重的性能问题，下面我就来说一下如何正确的添加和销毁全局的事件监听。

添加

1、element.addEventListener的使用方法

这里我就不多啰嗦了，网上已经讲的很明白了，下面附上链接。

https://www.runoob.com/jsref/met-element-addeventlistener.html

2、window.addEventListener和document.addEventListener

我们知道，document是window下的一个对象，一般情况下，这两个都可以添加全局的事件监听，区别就是，执行的顺序会不太一样。

如果addEventListener没有第三个参数或第三个参数为false的话，也就是说在冒泡阶段执行，document.addEventListener的绑定事件会先于window.addEventListener的绑定事件执行。

若addEventListener的第三个参数为true的话，也就是说在捕获阶段执行，window.addEventListener的绑定事件会先于document.addEventListener的绑定事件执行。

这个应该比较好理解，就是捕获和冒泡的事件执行顺序的区别。

3、不使用匿名函数

下面我列举两种添加事件监听的写法：

function handleClick () {
    alert('hello!')
}

// 第一种
document.addEventListener('click', handleClick)

// 第二种
document.addEventListener('click', () => {
    alert('hello!')
})

这两种写法看起来没有什么大的区别，也都能实现同样的效果，但实际上第二种写法是错误的，一旦把这种匿名函数添加到全局的事件监听当中，会导致无法销毁这个监听事件。

原因也很简单，函数名会作为销毁监听事件时的索引，但是匿名函数没有函数名，所以我们也就无法获得其索引，也就无法销毁此监听事件。

销毁

1、参数与创建时要一致

还是先举两个例子：

// 正确
document.addEventListener('click', handleClick, true)
document.removeEventListener('click', handleClick, true)

document.addEventListener('resize', handleResize)
document.removeEventListener('resize', handleResize)

// 错误
document.addEventListener('click', handleClick, true)
document.removeEventListener('click', handleClick)

创建和销毁时传入的三个参数要完全一致，否则无法无法销毁。

2、注意第二个参数的有效性

这是什么意思呢？

在项目中，一个常见的场景就是：在页面进入后创建监听事件，并在页面离开后把这个监听销毁掉。

那么当页面销毁时，伴随着页面的一些方法很可能也跟着销毁或者改变了，当这时我们再去销毁事件监听时，实际上方法已经取不到了，但我们却浑然不知，举个例子：

let handleClick = () => {
    alert('Hello!')
}

document.addEventListener('click', handleClick)

handleClick = () => {
    alert('World!')
}

document.removeEventListener('click', handleClick)

例子比较简陋，就是希望大家能明白，添加和销毁时的方法一定要是同一个方法，确保没有被销毁或改变。