javascript 事件代理，原理和問(wèn)題

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

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

有如下 html 片段


    11111111111
    22222222222
    33333333333

要對(duì) 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);
    }
})

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

做一個(gè)簡(jiǎ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);
});

接下來(lái)的篇幅主要會(huì)聊到事件流，事件代理的原理和問(wèn)題，event 和 EventTarget 幫你深度了解 js 的事件。

事件觸發(fā)的流程

通常我們把事件流分為三個(gè)階段

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);
})

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

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

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

事件代理的原理和問(wèn)題

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

那事件代理會(huì)帶來(lái)什么問(wèn)題呢？

如果 ul 有 click ，并且在它上面為 li 做了 click 事件的代理。這個(gè)時(shí)候其實(shí)我只想觸發(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 并不能解決問(wèn)題，這里通過(guò)比較 target 和 currentTarget 來(lái)判斷當(dāng)前事件觸發(fā)元素（target）是否是注冊(cè)事件的元素（currentTarget）即可。

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

event 事件對(duì)象詳解 常用屬性：

currentTarget 注冊(cè)事件的 dom 元素

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

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

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

type 事件的類型

常用方法

preventDefault() 阻止默認(rèn)行為。例如 a 標(biāo)簽?zāi)J(rèn)會(huì)跳轉(zhuǎn) href 指定的鏈接，執(zhí)行該方法可以阻止跳轉(zhuǎn)的發(fā)生。

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

stopPropagation() 阻止冒泡行為。

EventTarget

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

EventTarget 有三個(gè)常用方法:

addEventListener(type, listener[, useCapture])

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

removeEventListener(type, listener[, useCapture])

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

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

dispatchEvent

手動(dòng)觸發(fā)事件，舉個(gè)例子（來(lái)自 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);

上面這個(gè)例子就是一個(gè)簡(jiǎn)單的自定義事件，如果想深入了解可以看張?chǎng)涡竦穆刯s自定義事件、DOM/偽DOM自定義事件