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