DOM事件

1.理解事件

• 事件行爲自己：沒有給事件綁定方法事件也是一直存在的，當觸發行爲的時候，也對觸發對應的行爲，只不過因爲沒有綁定事件，致使沒有任何事件發生；
• 事件綁定：給元素綁定一個方法；觸發行爲，執行方法；

2.DOM事件

• DOM0級事件：1️⃣(onclick)屬於元素的私有屬性；2️⃣使用DOM0級方法指定的事件處理程序被認爲是元素的方法，這也就解釋爲何事件處理程序的this指向當前元素；3️⃣事件處理程序只會在事件冒泡階段處理；4️⃣優點：簡單；跨瀏覽器；5️⃣刪除事件：設置爲null；btn.onclick=null;6️⃣一個元素只能綁定一個同一類型的行爲，不然後面的會覆蓋前面的行爲。
• DOM1：沒有升級事件相關的方法；
• DOM2級事件：1️⃣屬於公有方法，在eventTarget這個類的原型上—>全部的DOM節點都包含這兩種方法：addEventListener和removeEventlistener；2️⃣三個參數：（事件名，回調函數，布爾值）；布爾值：true—>捕獲階段調用回調函數；false—>冒泡階段調用回調函數；3️⃣addEventListener和removeEventlistener傳入的回調函數必須相同，不能使用匿名函數；4️⃣通常將事件添加到冒泡階段，這樣能夠最大限度的兼容瀏覽器。5️⃣同一個元素能夠綁定多個統一行爲；

3.事件對象

• 執行某一行爲時，不只執行了綁定方法，並且瀏覽器還會默認的給這個方法傳遞一個參數，這個參數就是—>event,事件對象。
• 事件對象的特色：
  1️⃣對象數據類型，包含有不少的屬性名和屬性值，用來記錄行爲的相關信息；
  2️⃣MouseEvent——UIEvent——Event——Object 原型
  3️⃣MouseEvent記錄的是頁面中惟一一個鼠標每次觸發的相關信息，和到底在哪一個元素上觸發沒有關係。

4.事件對象的兼容性問題

• 事件對象自己的兼容性問題：e=e||window.event;
• e.type:當前行爲類型，兼容；
• e.clientX/Y:距離可視窗口左上角x,y值，兼容；
• e.pageX/Y:距離body(第一屏)左上角x,y值，IE678不兼容；
• e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
• e.target:事件源，當前行爲觸發元素，存儲的就是那個元素IE678不兼容 e.target=e.target||e.srcElement;
• e.preventDafault:阻止瀏覽器的默認行爲，IE678不兼容；e.preventDafault?e.preventDafault:e.returnvalue=false;
• e.stopPropagation:阻止事件冒泡傳播，IE678不兼容；e.stopPropagation? e.stopPropagation:e.cancelBubble=true;

5.事件的傳播機制

• 捕獲：從外向內依次查找元素，event capturing；
• 目標：當前述事件源本省的操做；
• 冒泡：從內到外依次觸發的相關行爲，event bubbing;