滑鼠事件
一、事件的種類
click，dblclick，mousedown，mouseup，mousemovemouseenter：滑鼠進入一個節點時觸發，進入子節點不會觸發mouseover：滑鼠進入一個節點時觸發，進入子節點會再一次觸發mouseout：滑鼠離開一個節點時觸發，離開父節點也會觸發mouseleave：滑鼠離開一個節點觸發，離開父節點不會觸發contextmenu：滑鼠右鍵時觸發，或者按下“上下文選單鍵”時觸發wheel：滾動滑鼠的滾動輪時觸發
二、MounseEvent 介面的例項屬性
MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKey這四個屬性都返回一個布林值，表示事件發生時，是否按下對應的鍵。它們都是隻讀屬性。
- altKey屬性：Alt 鍵
- ctrlKey屬性：Ctrl 鍵
- metaKey屬性：Meta 鍵（Mac 鍵盤是一個四瓣的小花，Windows 鍵盤是 Windows 鍵）
- shiftKey屬性：Shift 鍵
MouseEvent.button返回一個數值，表示事件發生時按下了滑鼠的哪個鍵，屬性只讀。
- 0：按下主鍵（通常是左鍵），或者該事件沒有初始化這個屬性（比如mousemove事件）。
- 1：按下輔助鍵（通常是中鍵或者滾輪鍵）。
- 2：按下次鍵（通常是右鍵）。
MouseEvent.buttons屬性返回一個三個位元位的值，表示同時按下了哪些鍵。它用來處理同時按下多個滑鼠鍵的情況。該屬性只讀。
-
1：二進位制為001（十進位制的1），表示按下左鍵。
-
2：二進位制為010（十進位制的2），表示按下右鍵。
-
4：二進位制為100（十進位制的4），表示按下中鍵或滾輪鍵。
MouseEvent.clientX返回滑鼠位置相對於瀏覽器視窗左上角的水平座標（單位畫素），MouseEvent.clientY返回垂直座標。
MouseEvent.movementX返回當前位置與上一個mousemove事件之間的水平距離（單位畫素）。MouseEvent.movementY屬性返回當前位置與上一個mousemove事件之間的垂直距離（單位畫素）。
currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。
複製程式碼MouseEvent.screenX，MouseEvent.screenY返回滑鼠位置相對於螢幕左上角的水平座標和垂直座標，屬性只讀
MouseEvent.offsetX，返回滑鼠位置與目標節點左側的padding邊緣的水平距離。MouseEvent.offsetY返回與目標節點上方的padding邊緣的垂直距離。
MouseEvent.pageX返回滑鼠位置與文件左側邊緣的距離（單位畫素），MouseEvent.pageY返回與文件上側邊緣的距離（單位畫素）
MouseEvent.relatedTarget返回事件的相關節點。
| 事件名稱 | target 屬性 | relatedTarget 屬性 |
|---|---|---|
| focusin | 接受焦點的節點 | 喪失焦點的節點 |
| focusout | 喪失焦點的節點 | 接受焦點的節點 |
| mouseenter | 將要進入的節點 | 將要離開的節點 |
| mouseleave | 將要離開的節點 | 將要進入的節點 |
| mouseout | 將要離開的節點 | 將要進入的節點 |
| mouseover | 將要進入的節點 | 將要離開的節點 |
| dragenter | 將要進入的節點 | 將要離開的節點 |
| dragexit | 將要離開的節點 | 將要進入的節點 |
鍵盤事件
一、事件種類
主要有：keydown、keypress、keyup
進度事件
一、事件的種類
用來描述資源載入的進度，主要是 AJAX 請求、<img>、<audio>、<video>、<style>、<link>等外部資源的載入觸發。主要包含以下幾種事件：
abort外部資源中止載入時（如使用者取消）觸發。發生錯誤導致不觸發error由於錯誤導致外部資源無法載入時觸發load外部資源載入成功時觸發loadstart外部資源開始載入時觸發loadend外部資源停止載入時觸發，發生順序在error、abort、load等事件的後面progress外部資源載入過程中不斷觸發timeout載入超時時觸發
注意，除了資源下載，檔案上傳也存在這些事件。
有時候，圖片載入會在指令碼執行之前就完成，尤其是當指令碼放置在網頁底部的時候，因此有可能load和error事件的監聽函式根本不會執行。所以，比較可靠的方式，是用complete屬性先判斷一下是否載入完成。
function loaded(){
//...
}
if(image.complete){
loaded();
}else{
image.addEventListener('load',loaded);
}
複製程式碼由於 DOM 的元素節點沒有提供是否載入錯誤的屬性，所以error事件的監聽函式最好放在<img>元素的 HTML 程式碼中，這樣才能保證發生載入錯誤時百分之百會執行。
<img src="/wrong/url" onerror="this.style.display='none';" />
複製程式碼loadend事件的監聽函式，可以用來取代abort事件、load事件、error事件的監聽函式，應為他總是在這些事件之後發生
req.addEventListener('loadend',loadEnd,false);
function loadEnd(e){
console.log('傳輸結束，成功失敗未知');
}
複製程式碼error事件有一個特殊的性質，就是不會冒泡。所以，子元素的error事件，不會觸發父元素的error事件監聽函式。
二、ProgressEvent介面
用來描述外部資源載入的進度。瀏覽器提供ProgressEvent()建構函式，用來生成事件例項。
new ProgressEvent(type,options)
複製程式碼ProgressEvent()建構函式接受兩個引數。第一個引數是字串，表示事件的型別，這個引數是必須的。第二個引數是一個配置物件，表示事件的屬性，該引數可選。配置物件除了可以使用Event介面的配置屬性，還可以使用下面的屬性，所有這些屬性都是可選的。
-
lengthComputable：布林值，表示載入的總量是否可以計算，預設是false。 -
loaded：整數，表示已經載入的量，預設是0。 -
total：整數，表示需要載入的總量，預設是0。
ProgressEvent具有對應的例項屬性。
ProgressEvent.lengthComputableProgressEvent.loadedProgressEvent.total當ProgressEvent.lengthComputable為false，他就沒有意義。
var p = new ProgressEvent('load',{
lengthComputable: true,
loaded: 30,
total: 100,
});
document.body.addEventListener('load',function(e){
console.log('已經載入：'+(e.loaded/e.total)*100+'%');
});
document.body.dispathEvent(p);
// 已經載入：30%
複製程式碼上面程式碼先構造一個load事件，丟擲後被監聽函式捕捉到。
下面是一個實際的例子
var xhr = new XMLHttpRequest();
xhr.addEventListener('progress',updateProgress,false);
xhr.addEventListener('load',transferComplete,false);
xhr.addEventListener('error',transferFailed,false);
xhr.addEventListener('abort',transferVanceled,false);
xhr.open();
function updateProgress(e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
} else {
console.log('不能計算進度');
}
}
function transferComplete(e) {
console.log('傳輸結束');
}
function transferFailed(evt) {
console.log('傳輸過程中發生錯誤');
}
function transferCanceled(evt) {
console.log('使用者取消了傳輸');
}
複製程式碼上面是下載過程的進度事件，還存在上傳過程的進度事件。這時所有監聽函式都要放在XMLHttpRequest.upload物件上面。