事件註冊 DOM事件流 事件對象（經常使用屬性，方法） 事件委派（鼠標，鍵盤事件對象）

註冊事件概述

給元素添加事件，稱爲註冊事件或者綁定事件

註冊事件有兩種方式：傳統方式和方法監聽註冊方式

傳統註冊方式：利用 on 開頭的事件；例如：onclick；註冊事件的惟一性，後面的註冊事件會把前面的覆蓋

方法監聽註冊方式：addEventListener()IE9+；IE9之前用 attacthEvent()代替；會按照註冊順序依次執行沒有惟一性的問題

addEventListener() 事件監聽方式

eventTarget.addEventListener(type, listener[, useCapture]);
// 事件類型字符串，好比click，不用帶on
// listener：事件處理函數
// useCapture：可選參數，是一個布爾值，默認false

解綁事件

// 1. 傳統方式 
eventTarget.click = null;
// 2. 監聽方式移除
div.addEventListener('click', fn); // 這裏的 fn 不須要調用因此不帶括號
function fn() {
    // 要移除的事件以及要移除的事件函數
    div.removeEventListener('click', fn);
}

DOM事件流

事件流描述的是從頁面中接收事件的順序；

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程就是DOM事件流

DOM事件流分爲三個階段：

• 捕獲：document -> html -> body -> target
• 目標： target
• 冒泡：target -> body -> html -> document

有些事件是沒有冒泡的，例如：onblur onfocus onmouseenter onmouseleave

onclick 和 attachEvent 只能捕獲到冒泡階段

<div class="father">
  <div class="son"></div>
</div>

var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 當第三個參數爲 true 的時候 表示是捕獲階段，此時會先觸發 father 的 click 事件再觸發 son 的；
father.addEventListener('click', function () {
  alert('father');
}, true);
son.addEventListener('click', function () {
  alert('son');
}, true);
// 當第三個參數爲 false 或者爲空，表示冒泡階段，此時會先觸發 son 的 click 事件再觸發 father 的；
father.addEventListener('click', function () {
  alert('father');
}, false);
son.addEventListener('click', function (e) {
  alert('son');
  // 可是若是加了這個方法就會阻止事件冒泡行爲
  e.stopPropagation();
});

事件對象

eventTarget.onclick = function (event) {};
eventTarget.addEventListener('click', function (event) {});

• event對象表明事件的狀態，好比鍵盤按鍵，鼠標位置等；
• 事件發生後，跟事件相關的一些列數據的集合都放到了這個對象裏面，包含了不少的屬性和方法
• 這個 event 是一個形參，系統已經設定好的對象，不須要傳遞實參
• 存在兼容性問題 IE9+， IE6~8 window.event;

事件對象經常使用屬性和方法

事件對象屬性方法	說明
e.target;	返回觸發事件的對象（元素）
e.srcElement;	返回觸發事件的對象 IE 6~8
e.type;	返回事件的類型，好比 click mouseover
e.cancelBubble;	該屬性阻止冒泡 IE 6~8
e.reutrnValue;	該屬性阻止默認行爲， IE 6~8
e.preventDefault();	該方法阻止默認行爲，好比不讓連接跳轉
e.stopPropagation();	阻止冒泡

事件委託（代理，委派）

原理：不是每一個子節點單獨設置監聽器，而是監聽器設置在父節點中，而後利用冒泡原理影響設置每一個子節點

好比給ul註冊點擊事件，而後利用事件的 target 來找到當前點擊的 li，由於點擊 li 會冒泡到 ul 上， ul有註冊事件就會觸發監聽器；好處是隻操做了一次DOM，提升程序性能；

鼠標事件對象

鼠標事件對象	說明
e.clientX;	返回鼠標相對於瀏覽器可視區域的X座標
e.clientY;	返回鼠標相對於瀏覽器可視區域的Y座標
e.pageX;	返回鼠標相對於文檔頁面的X座標 IE 9+
e.pageY;	返回鼠標相對於文檔頁面的Y座標 IE 9+
e.screenX;	返回鼠標相對於電腦屏幕的X座標
e.screenY;	返回鼠標相對於電腦屏幕的Y座標

經常使用鍵盤事件

鍵盤事件	說明
onkeyup	某個按鍵被鬆開時觸發
onkeydown	某個按鍵被按下時觸發，優先級高於 onkeypress
onkeypress	某個按鍵被按下時觸發，可是不識別功能鍵，好比 shift ctrl 等

鍵盤事件對象

事件對象	說明
keyCode	返回該鍵的ASCII碼值

• keyup keydown 不區分字母的大小寫，只返回大寫的 ASCII
• keypress 區分大小寫