javascript 事件代理，原理和問題

SolomonXie 發(fā)布于2019-08-19 18:35 / 752人閱讀

摘要：可以用于事件處理函數(shù)中阻止冒泡行為。事件代理的原理和問題在我們了解了事件流之后，事件代理的原理就很好理解了，其實就是事件冒泡會觸發(fā)容器的相關(guān)事件并執(zhí)行監(jiān)聽函數(shù)。給注銷事件綁定。如果此事件正在執(zhí)行，會立即停止。

有如下 html 片段


    11111111111
    22222222222
    33333333333

要對 li 添加 click 事件。通常做法：

var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function(e) {
        console.log(e.target.textContent);
    })
}

事件代理的做法

var ul = document.getElementsByTagName("ul")[0];
ul.addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        console.log(e.target.textContent);
    }
})

我們來對比一下兩段注冊點擊事件的代碼。第一段代碼很常規(guī)，直接找到相關(guān)元素然后一一綁定。第二段代碼看起來簡潔一點，但多了一層判斷。

做一個簡單的 delegate 封裝

EventTarget.prototype.delegate = function(targetDom, type, listener) {
    this.addEventListener(type, function(e) {
        if (e.target.tagName === targetDom.toUpperCase()) {
            listener(e);
        }
    });
}

var ul = document.getElementsByTagName("ul")[0];
ul.delegate("li", "click", function(e) {
    console.log(e.target.textContent);
});

接下來的篇幅主要會聊到事件流，事件代理的原理和問題，event 和 EventTarget 幫你深度了解 js 的事件。

事件觸發(fā)的流程

通常我們把事件流分為三個階段

var ul = document.getElementsByTagName("ul")[0];
ul.addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        console.log(e.target.textContent);
    }
})
document.body.addEventListener("click", function(e)     {
    console.log("body", e.target.textContent);
})

捕獲階段：這個就是向下去找觸發(fā)事件的元素。但是一定注意如果這個時候 body 上的 click 并不會觸發(fā)。如果希望 body 上的 click 先觸發(fā)，就需要給 addEventListener 第三個參數(shù) useCapture 設(shè)置為 true （dom3 引入的，所以比較新的瀏覽器才有效）。

目標階段：執(zhí)行目標的綁定函數(shù)

冒泡階段：沿著父級元素一路向上，body 上如果也有 click 事件就會執(zhí)行。event.stopPropagation() 可以用于事件處理函數(shù)中阻止冒泡行為。

事件代理的原理和問題

在我們了解了事件流之后，事件代理的原理就很好理解了，其實就是事件冒泡會觸發(fā)容器 dom 的相關(guān)事件并執(zhí)行監(jiān)聽函數(shù)。

那事件代理會帶來什么問題呢？

如果 ul 有 click ，并且在它上面為 li 做了 click 事件的代理。這個時候其實我只想觸發(fā) li 的 click。解決方法如下：

var ul = document.getElementsByTagName("ul")[0];
ul.addEventListener("click", function(e) {
    if (e.target === e.currentTarget) {
        console.log(e.target);
    }
});
ul.delegate("li", "click", function(e) {
    console.log(e.target);
});

很顯然 stopPropagation 并不能解決問題，這里通過比較 target 和 currentTarget 來判斷當前事件觸發(fā)元素（target）是否是注冊事件的元素（currentTarget）即可。

stopPropagation，target，currentTarget 都是 event 的方法和屬性，所以下面詳細講講 event 對象。

event 事件對象詳解 常用屬性：

currentTarget 注冊事件的 dom 元素

srcElement ie6-8 的觸發(fā)事件的 dom 元素，非標準

target 觸發(fā)事件的 dom 元素

timeStamp 返回事件發(fā)生時的時間戳

type 事件的類型

常用方法

preventDefault() 阻止默認行為。例如 a 標簽默認會跳轉(zhuǎn) href 指定的鏈接，執(zhí)行該方法可以阻止跳轉(zhuǎn)的發(fā)生。

stopImmediatePropagation() 阻止冒泡行為，并立即阻止該綁定元素上的相同類型事件處理函數(shù)的執(zhí)行。立即阻止的意義在于，本方法執(zhí)行之前函數(shù)執(zhí)行或者其他的相同類型綁定不會有問題，但一旦執(zhí)行該方法后面的程序?qū)⒉辉賵?zhí)行。例子

stopPropagation() 阻止冒泡行為。

EventTarget

我們來看一下 mdn 對于 EventTarget 的定義：
一個EventTarget是一個可以接受DOM事件且能綁定事件監(jiān)聽器的對象.最常見的EventTarget就是DOM元素對象,另外,還有一些不是DOM元素的對象也能成為EventTarget,比如document, window, XMLHttpRequest,等等.

EventTarget 有三個常用方法:

addEventListener(type, listener[, useCapture])

給 EventTarget 添加事件綁定，type 為事件類型（例如 ‘click’），listener 事件觸發(fā)時的處理函數(shù)（默認參數(shù) event 本文后面會講到）。useCapture 是一個非必需的布爾值，默認為 false。如果設(shè)置為 true 即表示希望發(fā)起捕獲（關(guān)于捕獲，會在后面的事件觸發(fā)流程里講到）。

removeEventListener(type, listener[, useCapture])

給 EventTarget 注銷事件綁定。參數(shù)和 addEventListener 相同。需要特別注意兩點。

1、如果同一個監(jiān)聽事件分別為“事件捕獲”和“事件冒泡”注冊了一次，一共兩次，這兩次事件需要分別移除。兩者不會互相干擾。
2、如果此事件正在執(zhí)行，會立即停止。

dispatchEvent

手動觸發(fā)事件，舉個例子（來自 mdn）：

var event = new Event("build");

// Listen for the event.
elem.addEventListener("build", function (e) {
    console.log(e.target)
}, false);

// Dispatch the event.
elem.dispatchEvent(event);

上面這個例子就是一個簡單的自定義事件，如果想深入了解可以看張鑫旭的漫談js自定義事件、DOM/偽DOM自定義事件