JavaScript | 滑鼠事件&鍵盤事件
一、滑鼠事件
滑鼠事件是web開發中最常用的一類事件。例如，滑鼠滑過時，切換Tab欄顯示的內容;利用滑鼠拖曳狀態框，調整它的顯示位置等，這些常見的網頁效果都會用到滑鼠事件。下面列舉幾個常用的滑鼠事件，如下表
| 事件名稱 | 事件觸發時機 |
| click | 單擊事件（當按下並釋放任意滑鼠時觸發） |
| dblclick | 雙擊事件（當滑鼠雙擊時觸發） |
| mousedown | 按下滑鼠鍵時觸發 |
| mouseup | 釋放按下的滑鼠鍵時觸發 |
| mousemove | 滑鼠移動事件 |
| mouseover | 移入事件 |
| mouseout | 移出事件 |
| change | 當內容發生改變時觸發，一般都用於<select>物件 |
上表所示的滑鼠事件，在專案開發中還經常涉及一些常用的滑鼠屬性，用來獲取當前滑鼠的位置資訊。常用屬性如下表。
| 位置屬性(只讀) | 描述 |
| clientX | 滑鼠指標位於瀏覽器頁面當前視窗可視區的水平座標(x軸座標) |
| clientY | 滑鼠指標位於瀏覽器頁面當前視窗可視區的垂直座標(Y軸座標) |
| pageX | 滑鼠指標位於文件的水平座標(X軸座標)，IE6~8不相容 |
| pageY | 滑鼠指標位於文件的垂直座標(Y軸座標)，IE6~8不相容 |
| screenX | 滑鼠指標位於螢幕的水平座標(x軸座標) |
| screenY |
滑鼠指標位於螢幕的垂直座標(Y軸座標) |
為了讓大家更好地理解滑鼠事件的使用，下面寫一個小demo進行演示
<div id="mouse"></div>
<script>
var mouse = document.getElementById('mouse');
//需求:滑鼠在頁面上單擊時，獲取單擊時的位置，並顯示一個小圓點
document.onclick = function(event) {
//獲取事件物件的相容處理
var event = event ll window.event;
// 滑鼠在頁面上的位置
var pageX = event.pageX 1 event.clientX+ document.documentElement.scrollLeft
var pageY = event.pageY| event.clientY + document.documentElement.scrollTop
//計算<div>應該顯示的位置
var targetX = pageX - mouse.offsetwidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
//在滑鼠單擊的位置顯示<div>
mouse.style.display = 'block';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
上述第1行設定的<div>元素，表示當前滑鼠單擊頁面的位置，預設情況下隱藏。第3行用於獲取滑鼠位置的元素物件。第5~18行程式碼為 document 文件新增單擊事件，並對其進行處理。其中，第7~10行程式碼用於獲取事件物件以及滑鼠在頁面中的位置，第 12~13 行計算<div>的顯示位置，讓滑鼠顯示到<div>的中心上，第 15~17行程式碼用於顯示並設定<div>。單擊頁面，即可出現效果。
二、鍵盤事件
鍵盤事件是指使用者使用鍵盤時觸發的事件。例如，使用者Esc鍵關閉開啟的狀態列，按Enter鍵直接完成游標的上下切換等。下面列舉幾個常用的鍵盤事件
| 事件名稱 | 事件觸發時機 |
| keydown | 在鍵盤上按下某個鍵時觸發。如果按住某個鍵，會不斷觸發該事件，但是 Opera 瀏覽器不支援這種連續操作。該事件處理函式返回 false 時，會取消預設的動作（如輸入的鍵盤字元，在 IE 和 Safari 瀏覽器下還會禁止keypress 事件響應）。 |
| keypress | 按下某個鍵盤鍵並釋放時觸發。如果按住某個鍵，會不斷觸發該事件。該事件處理函式返回 false 時，會取消預設的動作（如輸入的鍵盤字元） |
| keyup |
釋放某個鍵盤鍵時觸發。該事件僅在鬆開鍵盤時觸發一次，不是一個持續的響應狀態。 |
需要注意的是，keypress事件儲存的按鍵 值是ASCII碼，keydown和keyup 事件儲存的按鍵值是虛擬鍵碼。讀者可參考 MDN 等手冊進行 檢視，此處不再詳細列舉。為了讓大家更好地理解鍵盤事件的使用，下面以Enter鍵切換的使用進行演示。
（1）編寫HTML頁面
<p>使用者姓名:<input type="text"></p> <p>電子郵箱:<input type="text"></p> <p>手機號碼:<input type="text"></p> <p>個人描述:<input type="text"></p>
（2）按Enter鍵切換的效果
<script>
var inputs =document.getElementsByTagName('input');
for (var i =0; i<inputs.length; ++i) { inputs[i].onkeydown = function(e){
//獲取事件物件的相容處理
var e=event ll window.event;
//判斷按下的是不是Enter鍵，如果是，讓下一個input獲取焦點
if (e.keyCode===13) {
//遍歷所有input框，找到當前input的下標 for (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === this) {
//計算下一個input元素的下標
var index = i + 1 >= inputs.length?0 :i+1;
break;
}
}
// 如果下一個input還是文字框，則獲取鍵盤焦點
if (inputs[index].type === 'text') {
inputs[index].focus(); // 觸發 focus 事件
}
}；
}
</script>
上述第2行用於獲取所有的input元素物件，第3~23行通過遍歷為每個input元素新增 keydown 事件，當發生事件時，判斷當前鍵盤事件的ke eyCode屬性值是否全等於13若是則表示使用者的按鍵為Enter(回車)，讓下一個input元素獲了取鍵盤焦點。否則不進行任何操作。
其中,第10~16行程式碼通過遍歷所有input元素獲取發生鍵盤事件的input元素物件的下標，計算下一個input元素的下標。第18~20行程式碼表示 下一個input框是文字框時，為其獲取鍵盤焦點。完成後按 Enter鍵即可進行切換測試。