el.removeEventListener(event-type, event-handle, capture)
.移除之前注册的事件
.性能考虑,有事件注册就应该有事件清除
.正常起见,必须传入与注册中完全相同的函数引用;怎么注册就怎么清除
1. 避免调试干扰:如果你在开发阶段频繁刷新或测试页面跳转逻辑,保留未解绑的监听器可能会导致行为异常,例如旧监听器被意外触发
2. 防止某些特殊情况下的内存泄漏:在一些老旧浏览器或复杂 SPA 架构中,如果组件/模块没有正确销毁,监听器未解绑可能导致内存无法释放
3. 编码规范 & 可维护性:主动解除绑定是一种良好的编程习惯,有助于代码可读性和资源管理意识
[] 绑定多个事件侦听器
//具名函数
wrap.addEventListener('click', fn)
//匿名函数;无法清除
wrap.addEventListener('click', (e) => {
console.log('wrap', e.target);
})
function fn(e) {
console.log('wrap fn', e.target);
}
//在另外一个元素的点击事件中,移除 wrap 的事件侦听器,只有 fn 可以被移除;另外一个事件继续生效
card.addEventListener('click', (e) => {
console.log('card', e.target);
wrap.removeEventListener('click', fn)
})
.部分事件如:blur / focus / submit / change / reset / select / mouseleave / mouseenter 没有冒泡
.事件处理函数尽量不要采用匿名函数的方式,否则无法清除
.适用于函数表达式
.使用开发者工具 → 事件侦听器,查看事件的添加和移除
.使用 beforeunload 比 unload 更合适;unload 的兼容性和执行稳定性较差(部分浏览器限制 JS 执行)
.不能直接使用,否则会被立即执行
.需要使用匿名函数,在匿名函数里执行封装的带参函数
[] 封装表单域的获取焦点和失去焦点函数
function setBg(color) {
console.log('hi');
console.log(ta);
ta.style.background = color;
}
.获取元素并侦听事件,发现函数被立即执行了其中的log,但是元素并没有按照设想改变颜色;继续交互同样不会执行
ta.addEventListener('focus', setBg('#f40'));
ta.addEventListener('blur', setBg('#ccc'));
.将封装的带参函数,放在匿名函数中执行。问题解决
ta.addEventListener('focus', function () {
setBg('#f40')
});
ta.addEventListener('blur', function () {
setBg('#ccc')
});
.也可以使用箭头函数,同时获取事件对象e
ta.addEventListener('focus', (e) => {
console.log(e);
setBg('#f40')
});
ta.addEventListener('blur', (e) => {
console.log(e);
setBg('#ccc')
});