JavaScript鍵盤事件響應(yīng)順序詳解
更新時(shí)間：2019年09月30日 08:46:10 作者：吳聲子夜歌
這篇文章主要為大家詳細(xì)介紹了JavaScript鍵盤事件響應(yīng)順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
鍵盤響應(yīng)順序
當(dāng)按下鍵盤時(shí)，會(huì)觸發(fā)多個(gè)事件，它們將按順序發(fā)生。
對(duì)于字符鍵來說，鍵盤事件的影響順序如下：
1.keydown
2.keypress
3.keyup
對(duì)于非字符鍵（如功能鍵或特殊鍵）來說，鍵盤事件的響應(yīng)順序如下：
1.keydown
2.keyup
如果按下字符鍵不放，則keydown和keypress事件將逐個(gè)發(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)
富文本在Web開發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開發(fā)類似新聞管理小程序、商品簡介等,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript獲取表單內(nèi)所有元素值的方法,實(shí)例分析了javascript操作表單元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
TypeScript為對(duì)象動(dòng)態(tài)添加屬性代碼示例
這篇文章主要給大家介紹了關(guān)于TypeScript為對(duì)象動(dòng)態(tài)添加屬性的相關(guān)資料,在TypeScript 中,我們經(jīng)常需要在運(yùn)行時(shí)動(dòng)態(tài)添加屬性到對(duì)象上,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了js實(shí)現(xiàn)磁性吸附的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
本篇文章主要介紹了使用Ajax與服務(wù)器（JSON）通信方法，Ajax提供了兩類服務(wù)器通信手段：同步通信和異步通信。有需要的可以了解一下。2016-11-11
Wordpress ThickBox 添加“查看原圖”效果代碼
上一次修改了點(diǎn)擊圖片動(dòng)作 ， 這次添加一個(gè)“查看原圖”的鏈接，點(diǎn)擊后將在一個(gè)新瀏覽器窗口(或Tab)打開該圖片的原始鏈接地址。2010-12-12
JS實(shí)現(xiàn)html頁面點(diǎn)擊下載文件的兩種方式
這篇文章主要介紹了JS實(shí)現(xiàn)html頁面點(diǎn)擊下載文件的兩種方式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了TypeScript 工具泛型教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能，利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動(dòng)時(shí)，觸摸結(jié)束的X/Y坐標(biāo)，根據(jù)差值來改變整個(gè)卡片的位置，具體實(shí)例代碼跟隨小編一起看看吧2019-12-12
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07