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) }, 複製程式碼