vue页面监听键盘鼠标等事件。html
官方给的例子是在input
标签中的,咱们想要的效果是不使用固定标签。vue
mounted () { window.addEventListener('keyup',this.handleKeyup) window.addEventListener('scroll',this.handleScroll) },
这里定义了,键盘按出的时候的事件 和 鼠标滑轮滚动的事件。git
这里能够自行查询下有哪些事件,github
关键字:segmentfault
HTML DOM Event
这里根据addEventListener(event,function)
的用法。post
event
,必参,字符串,注意要把DOM事件的名称去掉on
this
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) }, }
destroyed () { window.removeEventListener('keyup',this.handleKeyup) window.removeEventListener('scroll',this.handleScroll) },
感谢支持。若不足之处,欢迎你们指出,共勉。.net
若是以为不错,记得 点赞 ,谢谢你们 😂code
欢迎关注 个人: 【Github】 【掘金】 【简书】 【CSDN】 【OSCHINA】 【SF】
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。