vue addlistener,vue window.addEventListener
本文主要介绍了vue中addEventListener和removeEventListener的使用说明，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
addEventListener和removeEventListener的用法说明1、添加监听事件(addEventListener)2、移除监听事件(removeEventListener)使用addEventListener添加事件，移除removeEventListener添加事件移除事件
addEventListener和removeEventListener用法说明
1、添加监听事件（addEventListener）
语法：element.addeventlistener(事件，函数，使用捕获)
事件：指定事件名称(注意：不要使用“on”前缀。比如用 click 代替 onclick )函数：指定事件触发时要执行的函数(事件对象将作为第一个参数传入函数)useCapture:指定事件是在捕获阶段还是冒泡阶段执行，默认为false(true-事件句柄在捕获阶段执行，false-事件句柄在冒泡阶段执行)mounted() {
window . addevent listener( resize ，this . set nav left)；
},
方法：{
listener函数(e) {
document . addevent listener( scroll ，this.handleScroll，true)；
},
}
2、移出监听事件（removeEventListener）
语法：element.removeeventlistener(事件，函数，使用捕获)
注意：要在vue中销毁事件监控，必须在销毁的生命周期中执行。从销毁前到销毁，执行组件事件拆卸，销毁前的事件销毁不成功。
销毁(){
document . removeeventlistener( scroll ，this.handleScroll，true)；
window . removeeventlistener( resize ，this . set nav left)；
},
使用addEventListener添加事件、removeEventListener移除事件
最近在项目中需要addEventListener来监控滚动条的滚动高度，所以本文研究了如何在vue中监控事件。
添加事件
将ref属性添加到要添加事件的元素中。
在已装载中添加事件
已安装(){
这个。$ refs . box . addevent listener( scroll ，()={
console.log(scroll ，this。$refs.box.scrollTop)
});
}
这样就添加成功了！
移除事件
如果要移除添加的事件，removeEventListener传入的方法必须与addEventListener传入的方法相同才能成功移除，所以添加时不能使用匿名函数。它需要被写成如下
已安装(){
这个。$ refs . box . addevent listener( scroll ，this . scroll event)；
},
方法：{
scrollEvent(){
console.log(scroll ，this。$refs.box.scrollTop)
}
}
这里注意，传递的方法this.scrollEvent后面不能跟括号，否则无法成功添加。
销毁组件前删除事件
销毁前(){
这个。$ refs . box . remove event listener( scroll ，this . scroll event)；
}
如果是保活组件，可以使用下面的方法。
已激活(){
这个。$ refs . box . addevent listener( scroll ，this . scroll event)；
},
停用(){
这个。$ refs . box . remove event listener( scroll ，this . scroll event)；
},
另外，addEventListener还可以给一个元素添加多个事件，不会覆盖已有的事件，这里就不展开了~
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。