|
1.鍵盤(pán)事件 鍵盤(pán)事件是指當(dāng)用戶操作鍵盤(pán)的時(shí)候會(huì)自動(dòng)被觸發(fā)的事件，通常分為以下三種 ① keydown，用戶按下任意鍵都可以觸發(fā)這個(gè)事件，如果按住不放，事件會(huì)被連續(xù)觸發(fā) ?、?nbsp;keypress，用戶按下任意鍵都可以觸發(fā)這個(gè)事件，如果按住不放，事件會(huì)被連續(xù)觸發(fā) 這里的任意鍵是指可顯示的鍵，不包括功能鍵 keypress方法識(shí)別大小寫(xiě)，而 keydown不區(qū)分 ?、?nbsp;keyup，用戶釋放按鍵時(shí)觸發(fā)事件 鍵盤(pán)事件一般都是綁定在需要用戶輸入的元素上（例如 input），但是由于鍵盤(pán)事件默認(rèn)采用事件冒泡機(jī)制， 因此，將鍵盤(pán)事件直接綁定在 body上也是允許的 語(yǔ)法：元素節(jié)點(diǎn) .on+事件名 = function(){ }; 2.keyCode屬性 在鍵盤(pán)事件中，可以通過(guò) event .keyCode來(lái)獲取按下的鍵的編碼值 通過(guò)這個(gè)屬性，可以獲取到用戶按下過(guò)哪些鍵 3.特點(diǎn)總結(jié) ① 捕獲對(duì)象范圍區(qū)別 keypress主要用于捕獲：數(shù)字（包括 shift+數(shù)字的符號(hào)）、字母（包括大小寫(xiě)）、小鍵盤(pán)等能夠顯示在屏幕上的內(nèi)容 但不能對(duì)系統(tǒng)功能鍵（回車(chē)、刪除、方向等）進(jìn)行正常響應(yīng)，另外，不能對(duì)中文輸入法有效響應(yīng) 而 keydown和 keyup通?？梢圆东@鍵盤(pán)上除了 PrtSc之外所有按鍵（特殊鍵盤(pán)的特殊鍵不在討論范圍） ?、?nbsp;捕獲字符長(zhǎng)度區(qū)別 keypress只能捕獲單個(gè)字符 keydown和 keyup可以捕獲組合鍵 ③ 捕獲字符大小寫(xiě)區(qū)別 keypress可以捕獲單個(gè)字符的大小寫(xiě) keydown和 keyup對(duì)于單個(gè)字符捕獲的 keyCode大小寫(xiě)都是同一個(gè)值，即不能判斷大小寫(xiě) ④ 捕獲字符數(shù)字區(qū)別 keypress不區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符 keydown和 keyup區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符 ?、?nbsp;特殊情況 PrScrn按鍵 keyPress、keyDown和 keyUp都不能捕獲 上下左右功能鍵 keyDown、keyUp都能獲取 keyCode，并且值相同 4.常見(jiàn)鍵盤(pán)按鍵keyCode <html lang="en">
<head>
<meta charset="UTF-8">
<title>鍵盤(pán)事件</title>
</head>
<body>
<input type="text">
<span class="tips"></span>
<script>
var tips=document.querySelector('.tips')
var input=document.querySelector('input');
input.onkeydown=function () {
console.log('downKey:'+event.keyCode);
if (event.keyCode==13){
console.log(input.value);
}
}
input.onkeypress=function(){
console.log('pressKey:'+event.keyCode);
};
//檢測(cè)大寫(xiě)鎖定是否開(kāi)啟
var flag=false;
document.body.onkeydown=function () {
if (event.keyCode==20){
if (flag ==false){
flag = true;
tips.innerHTML='大寫(xiě)鎖定已開(kāi)啟';
}else{
flag = false;
tips.innerHTML='大寫(xiě)鎖定已關(guān)閉';
}
}
}
</script>
</body>
</html>
5.觸摸事件 ?、?nbsp;touchstart，手指觸摸屏幕時(shí)觸發(fā)，即使已經(jīng)有一個(gè)手指在屏幕上了，也會(huì)觸發(fā) ?、?nbsp;touchmove，手指在屏幕上滑動(dòng)時(shí)連續(xù)的觸發(fā) ?、?nbsp;touchend，手指從屏幕上移開(kāi)時(shí)觸發(fā) ?、?nbsp;touchcancel，系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)（如電話接入、彈出信息等，一般用于觸發(fā)暫停類(lèi)的操作） 語(yǔ)法示例： 元素節(jié)點(diǎn) .addEventListener(' touchstart ', function(){ }); 如非特別說(shuō)明，事件均為冒泡事件 手機(jī)觸摸事件必須使用 DOM2方式進(jìn)行綁定 可以給一個(gè)元素添加多個(gè)觸摸事件 6.事件對(duì)象的屬性 事件對(duì)象，是“事件觸發(fā)時(shí)”用來(lái)保存“事件相關(guān)的所有信息的對(duì)象” 事件對(duì)象基本都是系統(tǒng)自動(dòng)生成，不需要手動(dòng)創(chuàng)建 示例： 元素節(jié)點(diǎn) .addEventListener(' touchstart ', function(event){ console.log(' touches begin '); }); 主要屬性： ?、?touches，表示當(dāng)前跟蹤的觸摸操作的 Touch對(duì)象的數(shù)組（當(dāng)前屏幕上所有的觸摸點(diǎn)列表） ?、?nbsp;targetTouches，特定于事件目標(biāo)的 Touch對(duì)象的數(shù)組（當(dāng)前對(duì)象上所有的觸摸點(diǎn)列表） ?、?nbsp;changeTouches，表示自上次觸摸以來(lái)發(fā)生了什么改變的 Touch對(duì)象的數(shù)組（涉及當(dāng)前事件的觸摸點(diǎn)列表） 7.觸摸對(duì)象的屬性 觸摸對(duì)象，即 事件對(duì)象的 Touches屬性中的每一個(gè)元素 一次觸摸會(huì)創(chuàng)建一個(gè)觸摸對(duì)象 觸摸對(duì)象中提供了很多屬性可供獲取和使用： clientX，觸摸目標(biāo)在視口中的橫坐標(biāo) clientY，觸摸目標(biāo)在視口中的縱坐標(biāo) identifier，表示觸摸的唯一ID pageX，觸摸目標(biāo)在頁(yè)面中的橫坐標(biāo) pageY，觸摸目標(biāo)在頁(yè)面中的縱坐標(biāo) screenX，觸摸目標(biāo)在屏幕中的X坐標(biāo) screenY，觸摸目標(biāo)在屏幕中的Y坐標(biāo) target，觸摸的 DOM節(jié)點(diǎn)坐標(biāo) 一般情況下，在事件被觸發(fā)時(shí)通過(guò)“ pageX和 pageY”兩個(gè)屬性來(lái)獲取當(dāng)前節(jié)點(diǎn)的位置 獲取觸摸點(diǎn)坐標(biāo)書(shū)寫(xiě)格式： event .touches[n] .pageX / pageY; // n表示第幾個(gè)觸摸點(diǎn) <body>
<div class="divTouch" style="width: 500px;height: 600px;background-color: lightgreen;"></div>
<script>
var divTouch=document.querySelector('.divTouch');
divTouch.addEventListener('touchstart',function () {
console.log(event.touches[0].pageX);
console.log(event.touches[0].pageY);
console.log(event.touches[0].clientX);
console.log(event.touches[0].screenX);
console.log(event);
});
</script>
</body>
|
|
|
來(lái)自： 精品唯居 > 《待分類(lèi)》
