瀏覽器運行環境知識點(不定期更新)

NO IMAGE

事件流(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>

相關文章

為什麼Julia這麼快?

PHP中類和文件的代碼註釋規範

Laravel+vue之環境部署

Laravel定製500錯誤頁