瀏覽器工做原理（四）：瀏覽器事件解讀

參考：https://zhuanlan.zhihu.com/p/23059366

1、事件的監聽

事件監聽的三種方式：

一、html內聯屬性：<button onclick="btnClick"></button>

二、DOM屬性綁定：document.getElementById("btn").onclick = function () {}

三、事件監聽函數：document.getElementById("btn").addEventListener("click", ()=>{}, false)

function addEventHandler(obj, eventName, handler) {
    if (document.addEventListener) {
        obj.addEventListener(eventName, handler, false);
    }
    else if (document.attachEvent) {
        obj.attachEvent("on" + eventName, handler);
    }    
    else {
        obj["on" + eventName] = handler;
    }
}

2、事件移除

一、document.getElementById("btn").removeEventListener("click", ()=>{}, false)

二、document.getElementById("btn").detachEvent("onclick")

三、document.getElementById("btn").onclick = null

function removeEventHandler(obj, eventName, handler) {
    if (document.removeEventListener) {
        obj.removeEventListener(eventName, handler, false);
    }
    else if (document.detachEvent) {
        obj.detachEvent("on" + eventName, handler);
    }
    else {
        obj["on" + eventName] = null;
    }
}

3、事件觸發過程

事件觸發過程分三個階段：捕獲階段、目標階段、冒泡階段

 

一、捕獲階段：用戶對 DOM 元素進行操做，從 Window 依次通過 docuemnt、html、body等，到達目標元素父節點的過程稱爲捕獲階段，注意此時還未到達目標節點。

二、目標階段：捕獲階段結束，事件到達目標元素並觸發事件的過程是目標階段

三、冒泡階段：目標元素觸發事件結束後，向父元素逐級返回的過程

4、事件委託

事件委託是指，某元素的事件本身不處理，而是藉助事件冒泡原理交由目標元素的父級或祖級元素處理的機制。例如，li列表事件能夠綁定到ul，radio列表事件能夠綁定在父級元素

一、爲何要事件委託

減小時間綁定，提高性能（事件綁定會佔用內存）

動態監聽，避免增長或刪除元素致使的事件綁定

二、流程

事件到達目標元素後，冒泡返回，被已綁定事件的父級或祖級元素響應執行。其中，事件對象中的 target 屬性記錄實際觸發本次事件的元素

5、阻止事件冒泡

在不但願事件冒泡的時候能夠阻止該機制

function preventBubble(e) {
    if (!e) {
        const e = window.event;
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}