摘要:最簡單的監(jiān)聽辦法就是使用使用格式如下它有兩個參數(shù),第一個參數(shù)是指定的單個按鍵或者組合鍵,第二個參數(shù)是一個回調(diào)函數(shù),它在每一次用戶按下指定的時被調(diào)用。
keypress.js是一個捕獲鍵盤輸入的JavaScript庫,它簡單易用,輕量級的壓縮版本只有9kB左右,并且沒有依賴其他JavaScript庫。
我們通常用鍵盤事件來監(jiān)聽keydown和keyup事件。當按下鍵盤的任意鍵的時候,keydown事件被觸發(fā),放開該鍵時keyup事件被觸發(fā)。但有一些特殊位置的鍵盤符無法自動觸發(fā)keyup事件,這時需要我們手動監(jiān)聽該事件。所以,就有了keypress.js用來監(jiān)聽鍵盤事件。
keypress.js的github地址以及項目主頁。
keypress.js的使用首先在html頁面中引入impress.js文件:
然后,實例化一個監(jiān)聽器:
var listener = new window.keypress.Listener();
接著,就可以用這個監(jiān)聽器監(jiān)聽鍵盤事件了,我們可以通過調(diào)用keypress.js的API來實現(xiàn)對鍵盤事件的監(jiān)聽。下面就介紹一下keypress.js都有哪些API。
.simple_combo最簡單的監(jiān)聽辦法就是使用使用simple_combo API
格式如下:
`simple_combo(keys, on_keydown_callback)`
它有兩個參數(shù),第一個參數(shù)是指定的單個按鍵或者組合鍵,第二個參數(shù)是一個回調(diào)函數(shù),它在每一次用戶按下指定的keyboard時被調(diào)用。例如:
listener.simple_combo("ctrl c", function() { console.log("You pressed ctrl c"); });
當用戶同時按下"ctrl c"時,函數(shù)才會被調(diào)用。
.counting_combo用于對組合快捷鍵被按下的次數(shù)進行計數(shù),格式如下:
counting_combo(keys, on_count_callback)
它也有兩個參數(shù),不過第一個參數(shù)是兩個按鍵組合的快捷鍵,比如Ctrl c,Ctrl v等,第二個參數(shù)是一個回調(diào)函數(shù),例如:
listener.counting_combo("shift s", function(e, count) { console.log("You"ve pressed this " + count + " times.");});
count實際上是shift一直按著的情況下c被按下的次數(shù)。
.sequence_combo用于注冊一個序列組合,
格式如下:
sequence_combo(keys, callback)
它也有兩個參數(shù),第一個參數(shù)是用于描述的按鍵序列,另一個參數(shù)是一個回調(diào)函數(shù),當按鍵序列的按鍵都被按下時,這個函數(shù)才會被調(diào)用。
例如:
listener.sequence_combo("up up down down left right left right b a enter", function() { lives = 30; }, true);.register_combo
如果想要使用有更高級的功能keypress事件,就可以使用.register_combo API,格式如下:
register_combo(combo_dictionary)
它提供了許多可選的參數(shù),下面是這些可選的參數(shù)以及它們的默認設(shè)置:
listener.register_combo({ "keys" : null, "on_keydown" : null, "on_keyup" : null, "on_release" : null, "this" : undefined, "prevent_default" : false, "prevent_repeat" : false, "is_unordered" : false, "is_counting" : false, "is_exclusive" : false, "is_solitary" : false, "is_sequence" : false });.register_many
如果一次要注冊多個組合,為了方便描述這些組合對象,可以將它們?nèi)糠诺揭粋€數(shù)組中,格式如下:
register_many(combo_dictionary_array)
例如:
var my_scope = this; var my_combos = listener.register_many([ { "keys" : "shift s", "is_exclusive" : true, "on_keydown" : function() { console.log("You pressed shift and s together."); }, "on_keyup" : function(e) { console.log("And now you"ve released one of the keys."); }, "this" : my_scope }, { "keys" : "s", "is_exclusive" : true, "on_keyup" : function(event) { // Normally because we have a keyup event handler, // event.preventDefault() would automatically be called. // But because we"re returning true in this handler, // event.preventDefault() will not be called. return true }, "this" : my_scope } ]);.unregister_combo
用于注銷所有的連擊或者指定按鍵組合,其格式如下:
unregister_combo(keys_or_combo_dictionary)
例如注銷所有的已經(jīng)注冊的shift s組合:
listener.unregister_combo("shift s");.unregister_many
格式如下:
unregister_many(array_of_keys_or_combo_dictionaries)
用于注銷大量的組合,從按鍵組成的數(shù)組中或者組合字典中注銷,例如:
listener.unregister_many(my_registered_combos);.get_registered_combos()
用于獲得監(jiān)聽中所有注冊的組合。
listener.get_registered_combos().reset()
重置,用于清空所有注冊的組合。
`listener.reset()`.stop_listening()
停止監(jiān)聽,直到listen()再次被喚醒。
例如當我們在輸入一個字段或者文本時就可以這樣用:
$("input[type=text]") .bind("focus", function() { listener.stop_listening(); }) .bind("blur", function() { listener.listen(); });.destroy()
用于監(jiān)聽結(jié)束后,摧毀此次監(jiān)聽的所有記錄。
listener.destroy();
有不對的地方,還請多多指教~~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/91158.html
摘要:本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的,我們的事件處理方式也是不一樣的。當然其優(yōu)點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。 在項目開發(fā)時,我們時常需要考慮用戶在使用產(chǎn)品時產(chǎn)生的各種各樣的交互事件,比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分,不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解...
摘要:本文是重溫基礎(chǔ)系列文章的第二十篇。事件捕獲為截獲事件提供機會,然后實際的目標接收到事件,最后事件冒泡,對事件作出響應(yīng)。事件處理事件處理,即響應(yīng)某個事件。包括導致事件的元素事件類型等其他信息。 本文是 重溫基礎(chǔ) 系列文章的第二十篇。 這是第三個基礎(chǔ)系列的第一篇,歡迎持續(xù)關(guān)注呀! 重溫基礎(chǔ) 系列的【初級】和【中級】的文章,已經(jīng)統(tǒng)一整理到我的【Cute-JavaScript】的Java...
摘要:適用標簽所有觸發(fā)條件單擊適用標簽所有觸發(fā)條件雙擊適用標簽觸發(fā)條件失去焦點適用標簽觸發(fā)條件獲取焦點適用標簽觸發(fā)條件更新輸入框的內(nèi)容改變并不代表的值更新。如果按一個鍵很久才松開,發(fā)生的事件為。 ngClick 適用標簽:所有觸發(fā)條件:單擊 #html click me click me #script angular.module(learnModule, []) ...
jQuery 鼠標事件 click與dbclick事件 用交互操作中,最簡單直接的操作就是點擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作,另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用法是類似的,下面以click()事件為例 方法一:$ele.click() 綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少 點擊觸發(fā) $(ele...
摘要:事件流事件流是指從頁面接受事件的順序一般考慮兼容性問題會使用冒泡而不適用捕獲事件冒泡事件開始時由具體的元素嵌套層次最深的元素接受然后逐級向上傳播到文檔事件捕獲基本跟事件冒泡相反事件捕獲用于在于事件到達預(yù)定目標之前捕獲他首先接收到事件然后事件 事件流 事件流是指從頁面接受事件的順序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...
閱讀 2857·2021-10-08 10:04
閱讀 3340·2021-09-10 11:20
閱讀 561·2019-08-30 10:54
閱讀 3383·2019-08-29 17:25
閱讀 2346·2019-08-29 16:24
閱讀 936·2019-08-29 12:26
閱讀 1512·2019-08-23 18:35
閱讀 2023·2019-08-23 17:53