内容简介: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事件监听的使用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Visual C#从入门到精通(第8版)
夏普 (John Sharp) / 周靖 / 清华大学出版社 / 2016-6-1
《Visual C#从入门到精通(第8版)》共27章,结构清晰,叙述清楚。所有练习均在Visual Studio 2015简体中文版上进行过全面演练。无论是刚开始接触面向对象编程的新手,还是打算迁移到C#的C、C++或Java程序员,都可以从《Visual C#从入门到精通(第8版)》汲取到新的知识。迅速掌握C#编程技术。一起来看看 《Visual C#从入门到精通(第8版)》 这本书的介绍吧!