Vue簡便監聽事件
摘要：
vue頁面監聽鍵盤滑鼠等事件。
官方給的例子是在input
標籤中的，我們想要的效果是不使用固定標籤。
2 實現原理
2.1 增加監聽
mounted () {
window.addEventListener('keyup',this.ha...
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)
},
複製程式碼