瀏覽器運行環境知識點（不按期更新）

事件流（Event Flow）

歷史淵源，網景提出了事件捕獲 event capture（document層層傳遞到目標節點），微軟提出了事件冒泡 event bubbling（目標節點層層傳遞至document）。 最後網景死了，事件冒泡被全部的瀏覽器兼容了,事件捕獲IE10如下不兼容。 w3c根據這對冤家主張，採起了折衷方案先捕獲再冒泡，目標節點註冊的事件不區分類型，先註冊先觸發。（DOM2級標準事件流）

addEventListener 參數詳解: 事件類型 、回調方法 、註冊事件流類型（默認false冒泡；true表明捕獲）

var dom = document.getElementById('target');
dom.addEventListener('click',handler,true);
var handler = function(){
    alert('click')
}


複製代碼

IE9以其下不兼容addEventListener，使用attachEvent

---

根據事件流特性，咱們使用事件委託的方式處理事件：

事件委託爲抽象出處理業務事件提供了可能性，減小了事件註冊數量。抽象、複用是編程之美，減小事件註冊爲咱們減小了資源的消耗。

var domList = document.getElementsByTag('li');
domList.addEventListener('click',handler,true);
var handler = function(e){
    var target = e.currentTarget;
    if(target.XXX == YYYYY){
        // TODO Somthing
    }
}


複製代碼

---

再多說一點，事件通知方式有兩種： DOM2 事件監聽（event listener）和 DOM0 事件處理(event handler). 和DOM3

// 監聽
dom.addeventListener('XXX',handler)
// on-event 事件處理，兩種使用方式，dom節點屬性和html標籤綁定
dom.onclick = function(){
    
} 
or
<div onclick="return alert('div')"></div>
複製代碼