内容简介:vue页面监听键盘鼠标等事件。官方给的例子是在这里定义了,键盘按出的时候的事件 和 鼠标滑轮滚动的事件。
vue页面监听键盘鼠标等事件。
官方给的例子是在 input
标签中的,我们想要的效果是不使用固定标签。
2 实现原理
2.1 增加监听
mounted () { window.addEventListener('keyup',this.handleKeyup) window.addEventListener('scroll',this.handleScroll) }, 复制代码
这里定义了,键盘按出的时候的事件 和 鼠标滑轮滚动的事件。
这里可以自行查询下有哪些事件,
关键字:
HTML DOM Event
可参考:W3school 菜鸟教程
这里根据 addEventListener(event,function)
的用法。
event
,必参,字符串,注意要把DOM事件的名称去掉 on
2.2 方法调用
methods:{ // 键盘事件 handleKeyup(event){ const e = event || window.event || arguments.callee.caller.arguments[0] if(!e) return const {key,keyCode} = e console.log(keyCode) console.log(key) }, // 滑轮事件 handleScroll(){ var e = document.body.scrollTop||document.documentElement.scrollTop if(!e) return console.log(e) }, } 复制代码
2.3 移除监控
destroyed () { window.removeEventListener('keyup',this.handleKeyup) window.removeEventListener('scroll',this.handleScroll) }, 复制代码
以上所述就是小编给大家介绍的《Vue简便监听事件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Laravel 给生产环境添加监听事件 - SQL日志监听
- Flutter事件监听
- react源码-事件监听
- Flutter 监听生命周期事件
- Spring Boot应用事件监听
- springboot~ EventListener事件监听的使用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java并发编程的艺术
方腾飞、魏鹏、程晓明 / 机械工业出版社 / 2015-7-1 / 59.00元
并发编程领域的扛鼎之作,作者是阿里和1号店的资深Java技术专家,对并发编程有非常深入的研究,《Java并发编程的艺术》是他们多年一线开发经验的结晶。本书的部分内容在出版早期发表在Java并发编程网和InfoQ等技术社区,得到了非常高的评价。它选取了Java并发编程中最核心的技术进行讲解,从JDK源码、JVM、CPU等多角度全面剖析和讲解了Java并发编程的框架、工具、原理和方法,对Java并发编......一起来看看 《Java并发编程的艺术》 这本书的介绍吧!