Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解
在vue中如何使用addEventListener添加事件、removeEventListener移除事件
最近在项目中需要用到addEventListener监听滚动条滚动的高度,所以就研究了一下在vue中是怎么进行事件监听的。
添加事件
给要添加事件的元素加上ref属性
在mounted中添加事件
mounted() { this.$refs.box.addEventListener('scroll',()=>{ console.log('scroll',this.$refs.box.scrollTop) }); }
这样就添加成功了!
移除事件
如果要移除已添加的事件,removeEventListener中传入的方法必须和addEventListener中传入的是同一个方法才能成功移除,所以在添加时就不能用匿名函数啦。需改成如下写法
mounted() { this.$refs.box.addEventListener('scroll',this.scrollEvent); }, methods:{ scrollEvent(){ console.log('scroll',this.$refs.box.scrollTop) } }
这里要注意 传入的方法 this.scrollEvent 后面不能加括号,否则无法成功添加
组件销毁前移除事件
beforeDestroy() { this.$refs.box.removeEventListener('scroll',this.scrollEvent); }
如果是keep-alive组件,可以用下面这种方式
activated() { this.$refs.box.addEventListener('scroll', this.scrollEvent); }, deactivated(){ this.$refs.box.removeEventListener('scroll',this.scrollEvent); },
另外,addEventListener还可以给一个元素添加多个事件,并且不会覆盖已存在的事件,这里就不多展开了~
扩展知识:
解析Vuejs使用addEventListener的事件触发执行函数的this问题
1、使用浏览器监听切屏为例
此处为考虑浏览器兼容性推荐使用:document.addEventListener
1.1、正常函数使用如下:
let n = 0; let max = 3; // 切屏最大次数 document.addEventListener("visibilitychange", function () { if(document.visibilityState == 'hidden'){ n++; } else if(document.visibilityState == 'visible') { if (n > max) { this.$alert('你已经切换离开考试页面超过'+max+"次系统将自动提交答卷!", '警告', { confirmButtonText: '知道了', callback: action => { this.msgSuccess("系统自动提交答卷!"); } }); return; } this.$alert('你已经切换离开考试页面'+n+'次,如果超过'+max+"次系统会自动提交答卷,请认真作答!", '警告', { confirmButtonText: '知道了', callback: action => {} }); } });
this.$alert()
为vue的MessageBox弹框组件
运行后报:
提示this.$alert()不是一个函数
此时我们尝试在document函数里面打印this到控制台看看
console.log("this===",this);
控制台输出信息:
指向的是调用addEventListener的对象
我们使用document对象去调用VueJS的组件函数肯定是行不通的,那么怎样可以拿到VueJS的this呢?我们只需稍作修改
1.2、bind()绑定事件指定函数
修改后的代码如下:
let n = 0; let max = 3; // 切屏最大次数 let fn = function () { console.log("this===",this); if(document.visibilityState == 'hidden'){ n++; } else if(document.visibilityState == 'visible') { if (n > max) { this.$alert('你已经切换离开考试页面超过'+max+"次系统将自动提交答卷!", '警告', { confirmButtonText: '知道了', callback: action => { this.msgSuccess("系统自动提交答卷!"); } }); return; } this.$alert('你已经切换离开考试页面'+n+'次,如果超过'+max+"次系统会自动提交答卷,请认真作答!", '警告', { confirmButtonText: '知道了', callback: action => {} }); } } // 使用bind绑定的事件才是指向函数,否则指向的是调用addEventListener的对象 document.addEventListener("visibilitychange", fn.bind(this));
详解:
将触发事件后执行的函数抽到外部,作为外部函数并赋予函数名在事件中使用函数名.bind('指定函数')
;即可在执行的函数中获取到bind绑定的指定函数
控制台查看此时的this为
效果图:
下面介绍下vue 监听事件addEventListener
代码如下所示:
// vue 添加监听事件,addEventListener第二个参数要绑在this上,即需要在methods中声明,否则销毁的时候会报错 // 在mounted中监听,在beforeDestroy中销毁,绑定的事件在methods中声明 mounted() { // 监听 window.addEventListener('resize', this.handleEventListener) }, beforeDestroy() { // 销毁 window.removeEventListener('resize', this.handleEventListener) }, methods: { // 监听执行的事件 handleEventListener() { }, }
到此这篇关于解析Vuejs使用addEventListener的事件触发执行函数的this问题的文章就介绍到这了,更多相关vuejs addEventListener的事件触发内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://www.cnblogs.com/aerfazhe/archive/2022/12/29/17012043
相关文章
- 本文给大家介绍了在C#中,事件(event)的概念和使用方法,文章适合一些初学者学习,主要讲解了一些概念和一些代码案例。...2020-06-25
- 本文主要介绍this关键字的几种使用方法,this可以代表当前实例,可以调用其他构造函数,还可以用来构建索引器,这里都有一一举例说明。...2020-06-25
- 这篇文章主要介绍了C#事件实例详解的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。...2016-06-12
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 这篇文章主要给大家介绍了7道关于JS this的面试题,来看看你能答对几个,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-05
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要介绍了C#中this指针的用法,对初学者而言是非常重要的概念,必须加以熟练掌握,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了JavaScript的this关键字,真正帮助大家做到精通this关键字,感兴趣的小伙伴们可以参考一下...2016-03-01
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下...2016-01-21- 这篇文章主要介绍了详解C#中委托,事件与回调函数讲解,小编觉得挺不错的,现在就分享给大家,也给大家做个参考。...2020-06-25
- 这篇文章主要为大家介绍了python编程使用PyQt5如何创建按钮及触发点击事件的示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步...2021-10-29
- 这篇文章主要介绍了C#之事件的知识点,文中代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#移除所有事件绑定的方法,实例分析了C#事件绑定的移除方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏...2014-06-07
- 这篇文章主要介绍了C#中this的使用方法,this是C#程序设计中非常重要的一个关键字,本文以实例形式对此作出简单的用法分析,需要的朋友可以参考下...2020-06-25
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
这篇文章主要介绍了jQuery中bind(),live(),delegate(),on()绑定事件方法,结合实例形式详细分析了bind(),live(),delegate(),on()方法绑定事件的具体使用技巧,并对比分析了四种方式的异同点,需要的朋友可以参考下...2016-01-21- 本文主要分享了jquery实现输入框实时输入触发事件的代码,代码简单易懂,需要的朋友一起来看下吧...2017-01-09
JavaScript中的this,call,apply使用及区别详解
本文结合基本javascript的权威书籍中的内容,根据自己的理解,通过相关示例向大家展示了javascript中this,call,apply使用及区别,非常的细致全面,希望大家能够喜欢。...2016-02-01- 这篇文章主要介绍了C#中事件的动态调用实现方法,对比传统思路优劣给出了一个新的解决方案,需要的朋友可以参考下...2020-06-25