JavaScript中DOM事件监听器的叠加与移除机制

DOM事件监听的覆盖问题

HTML DOM元素包含众多以on开头的事件监听属性，例如onload、onclick等，具体列表可参考DOM事件文档。然而，若直接通过属性赋值方式注册同一种事件，后续注册的代码会直接覆盖之前的注册结果。

window.onresize = function(){
  alert(1);
}
window.onresize = function(){
  alert(2);
}
// 改变窗口大小时，只会弹出2 

addEventListener的叠加特性

使用addEventListener进行监听

采用addEventListener方法添加事件监听器，允许对同一事件重复注册多次，且各监听器之间不会发生相互覆盖的情况。

window.addEventListener("resize",function(){
  alert(1)
})
window.addEventListener("resize",function(){
  alert(2)
})
// 改变窗口大小时，先后弹出1和2

需要注意的是，在此处指定事件类型时，不需要添加"on"前缀。

removeEventListener的移除限制

使用removeEventListener移除监听

removeEventListener方法与addEventListener相对应，专门用于移除已注册的事件监听器。

若要成功移除事件句柄，addEventListener() 所绑定的执行函数必须是外部定义的具名函数；若使用匿名函数注册事件，则无法将其移除。

// 匿名函数事件无法移除
window.addEventListener("resize",function(){
  alert(1)
})
// 监听具名函数事件
function myResize(){
  alert(2)
}
window.addEventListener("resize",myResize)
// 移除事件监听
window.removeEventListener("resize",myResize) 

总结

以上内容介绍了JavaScript中监听事件的叠加注册与移除方法，希望能为读者提供帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！