JavaScript - 事件機制

事件監聽

標準：addEventListener(eventType, handler, useCapture) / IE：attachEvent(eventType, handler)
removeEventListener, detachEvent
之因此出現這兩種是由於當時網景主張事件捕獲，微軟主張事件冒泡。w3c標準下采起了折中，先捕獲再冒泡。

這樣，事件的觸發過程就有了三個階段：
1,捕獲階段：document往事件觸發地點，向下捕獲前進，遇到相同的註冊事件類型就當即觸發執行。
2,到達事件位置：觸發事件。
3,冒泡階段：從事件觸發位置向document往外冒泡，遇到相同註冊事件就當即觸發。

ps: dom1級事件綁定只能在冒泡階段觸發

在同一個對象上註冊事件，也並不必定按照註冊的順序執行，而是按照事件綁定的節點順序。

值得一提的，阻止冒泡的stopPropagation()的方法，它不止會阻止事件冒泡，還會阻止事件捕獲。
好比你在捕獲類型中使用，它會阻止事件的進一步傳播。

值得一提的，stopImmediatePropagation()方法。若是給一個對象註冊了兩次click事件，分別執行兩個處理函數func1/func2。
那麼在func1中使用stopPropagation，func2也會執行，只有使用stopImmediatePropagation()才能當即中斷事件處理。

HTML內聯 / DOM屬性綁定
耦合度高

 

自定義事件

Event
1,new一個Event實例，參數是事件類型名。`new Event('myevent')`
2,綁定事件監聽 `elem.addEventListener('myevent', function (e) { ... }, false);`
3,dispatchEvent模擬觸發事件 `elem.dispatchEvent(event);`

CustomEvent
1,new 一個實例 `new CustomEvent(eventname, options)`
2,3,同上
附帶數據options
```
{
detail: { //初始化信息 },
bubbles: true,
....
}
```
模擬事件觸發，是能夠冒泡的~

 

事件代理

原理是，事件綁定後，將會從綁定的父元素節點向下前進到觸發事件的元素，再冒泡回綁定的父元素dom.
因此咱們沒必要爲每一個子元素都註冊上事件，只要對他的父元素進行監聽，便可代理對後代dom的監聽。
而我只須要經過event.target就能得到觸發的子元素並響應。

這樣意味着，節省了大量重複的事件監聽，減小資源消耗；讓html獨立，若有增長子元素，也沒必要再單獨監聽。

 

事件對象
每一個事件被觸發的時候，會建立一個事件對象Event Object。

經常使用屬性/方法：
type:
target: 要觸發的目標節點（IE -> srcElement）
currentTarget: 正在處理事件的節點（IE -> this）
bubbles: 事件是否在冒泡階段觸發
stopPropagation():
preventDefault(): 禁止默認行爲
cancelable: 是否可使用preventDefault()禁止默認行爲
eventPhase: 事件觸發處於什麼階段（0 none - 1 - 2 - 3）
pageX: pageY...

 

經常使用事件
load: 全部資源加載好以後觸發
DOMContentLoaded: DOM 構建好以後觸發（jQuery.ready）
resize:
當節點尺寸發生變化時，觸發這個事件。一般用在 window 上，這樣能夠監聽瀏覽器窗口的變化。
一般用在複雜佈局和響應式上。
出於對性能的考慮，你可使用函數 throttle 或者 debounce 技巧來進行優化。
throttle 方法大致思路就是在某一段時間內不管屢次調用，只執行一次函數，到達時間就執行；
debounce 方法大致思路就是在某一段時間內等待是否還會重複調用，若是不會再調用，就執行函數，若是還有重複調用，則不執行繼續等待。
error: 加載資源失敗或者加載成功可是隻加載一部分而沒法使用時觸發

 

參考

[Event](https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties)

[Events Order](http://www.quirksmode.org/js/events_order.html)