Vue監聽鍵盤鼠標事件

AlphaWatch 發布于2019-08-23 17:08 / 1055人閱讀

摘要：前言業務場景頁面監聽鍵盤鼠標等事件。實現原理增加監聽這里定義了，鍵盤按出的時候的事件和鼠標滑輪滾動的事件。，必參，字符串，注意要把事件的名稱去掉方法調用鍵盤事件滑輪事件移除監控后記感謝支持。

1 前言 1.1 業務場景

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)
},

3 后記

感謝支持。若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得點贊，謝謝大家

云服務器 GPU云服務器監聽鍵盤事件 js監聽鼠標三擊事件鍵盤鼠標鼠標鍵盤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103870.html

Vue.js中的v-on(事件處理)

摘要：不必擔心，因為所有的事件處理方法和表達式都嚴格綁定在當前視圖的上，它不會導致任何維護上的困難。當一個被銷毀時，所有的事件處理器都會自動被刪除。 Vue.js的事件處理監聽事件我們可以用 v-on 指令監聽 DOM 事件來觸發一些 JavaScript 代碼。 {{msg}} var vm = new Vue({ el:.box, data:{ ...

YuboonaZhang 2019-08-21 12:05 評論0 收藏0
Vue的事件處理方法

摘要：事件處理上一篇的條件渲染與列表渲染下一篇的表單輸入綁定事件監聽指令可以用來監聽事件來執行一些代碼這個按鈕被點擊了次按鈕方法事件處理器許多事件處理的邏輯都很復雜，所以直接把代碼寫在指令中是不可行的。因此可以接收一個定義的方法來調用。事件處理上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...下一篇：Vue的表單輸入綁定：https://...

archieyang 2019-08-21 12:05 評論0 收藏0
vue2.0學習筆記（事件處理）

摘要：請記住，會告訴瀏覽器你不想阻止事件的默認行為。而單單釋放也不會觸發事件。修飾符修飾符允許你控制由精確的系統修飾符組合觸發的事件。當一個被銷毀時，所有的事件處理器都會自動被刪除。 1、監聽事件用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 評論0 收藏0
vue的TodoMVC事例總結

摘要：縮寫為數據鍵盤事件添加事項指令指令監聽事件。這塊內容只會在指令的表達式返回值的時候被渲染。清空已辦事項全選取消全選方法用于調用數組的每個元素，并將元素傳遞給回調函數。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染數據鍵盤事件：添加事項鼠標點擊事件：移除事項顯示未辦事項數據全部事項、未辦事項、已辦事項狀態切換清除全部完成...

CKJOKER 2019-08-26 10:10 評論0 收藏0
1-4. Vue.js核心知識之事件處理

摘要：我們可以用指令監聽事件，并在觸發時運行一些代碼。點擊按鈕，后面的函數會把參數帶入執行，彈窗顯示點擊計算事件修飾符事件處理程序中經常會用到或，這里幫我們很容易的就實現了。我們可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。監聽事件點擊次數加1 你已經點了 {{ counter }} 次了 new Vue({ el: ...

darkbaby123 2019-08-23 18:00 評論0 收藏0