1 前言
1.1 業務場景
vue頁面監聽鍵盤鼠標等事件。
官方給的例子是在input
標簽中的,我們想要的效果是不使用固定標簽。
2 實現原理
2.1 增加監聽
mounted () {
window.addEventListener('keyup',this.handleKeyup)
window.addEventListener('scroll',this.handleScroll)
},
這里定義了,鍵盤按出的時候的事件 和 鼠標滑輪滾動的事件。
這里可以自行查詢下有哪些事件,
關鍵字:
HTML DOM Event
這里根據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)
},
3 后記
感謝支持。若不足之處,歡迎大家指出,共勉。
如果覺得不錯,記得 點贊 ,謝謝大家 ??
本文章采用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。