JavaScript鍵盤事件響應(yīng)順序詳解
鍵盤響應(yīng)順序
當(dāng)按下鍵盤時,會觸發(fā)多個事件,它們將按順序發(fā)生。
對于字符鍵來說,鍵盤事件的影響順序如下:
1.keydown
2.keypress
3.keyup
對于非字符鍵(如功能鍵或特殊鍵)來說,鍵盤事件的響應(yīng)順序如下:
1.keydown
2.keyup
如果按下字符鍵不放,則keydown和keypress事件將逐個發(fā)生,直至松開按鍵。
如果按下非字符鍵不放,則只有keydown事件持續(xù)發(fā)生,直至松開按鍵。
示例:獲取鍵盤事件響應(yīng)順序:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="text" cols="26" rows="16"></textarea>
<script>
var n = 1;
var text = document.getElementById("text");
text.onkeydown = f;
text.onkeyup = f;
text.onkeypress = f;
function f(e){
var e = e || window.event;
text.value += (n++) + "=" + e.type + " (keyCode=" + e.keyCode + ")\n";
}
</script>
</body>
</html>
輸入abc

分別輸入Shift、Ctrl、Alt功能鍵

連續(xù)按下字符a

連續(xù)按下Shift

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崙?zhàn)項目之富文本編輯器實現(xiàn)
富文本在Web開發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開發(fā)類似新聞管理小程序、商品簡介等,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)項目之富文本編輯器實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-10-10
Wordpress ThickBox 添加“查看原圖”效果代碼
上一次修改了點擊圖片動作 , 這次添加一個“查看原圖”的鏈接,點擊后將在一個新瀏覽器窗口(或Tab)打開該圖片的原始鏈接地址。2010-12-12
微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能,利用小程序事件處理的api,分別讀取觸摸開始,觸摸移動時,觸摸結(jié)束的X/Y坐標(biāo),根據(jù)差值來改變整個卡片的位置,具體實例代碼跟隨小編一起看看吧2019-12-12

