成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue監(jiān)聽鍵盤鼠標(biāo)事件

AlphaWatch / 1138人閱讀

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

1 前言 1.1 業(yè)務(wù)場景

vue頁面監(jiān)聽鍵盤鼠標(biāo)等事件。

官方給的例子是在input標(biāo)簽中的，我們想要的效果是不使用固定標(biāo)簽。

2 實現(xiàn)原理 2.1 增加監(jiān)聽 
mounted () {
    window.addEventListener("keyup",this.handleKeyup)
    window.addEventListener("scroll",this.handleScroll)
},

這里定義了，鍵盤按出的時候的事件 和 鼠標(biāo)滑輪滾動的事件。

這里可以自行查詢下有哪些事件，

關(guān)鍵字：

HTML DOM Event

可參考：W3school 菜鳥教程

這里根據(jù)addEventListener(event,function)的用法。

event，必參，字符串，注意要把DOM事件的名稱去掉on

2.2 方法調(diào)用 
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 移除監(jiān)控 
destroyed () {
    window.removeEventListener("keyup",this.handleKeyup)
    window.removeEventListener("scroll",this.handleScroll)
},
3 后記

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103870.html

相關(guān)文章

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

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

    YuboonaZhang 評論0 收藏0

  • Vue的事件處理方法

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

    archieyang 評論0 收藏0

  • vue2.0學(xué)習(xí)筆記（事件處理）

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

    bovenson 評論0 收藏0

  • vue的TodoMVC事例總結(jié)

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

    CKJOKER 評論0 收藏0

  • 1-4. Vue.js核心知識之事件處理

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

    darkbaby123 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<