首頁技術(shù)文章正文

如何理解事件委托？事件委托的優(yōu)缺點(diǎn)有哪些？

更新時(shí)間:2021年11月03日16時(shí)35分來源:傳智教育瀏覽次數(shù):

好口碑IT培訓(xùn)

JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器添加到一個(gè)上級元素上，這樣就避免了把事件處理器添加到多個(gè)子級元素上。當(dāng)我們需要對很多元素添加事件的時(shí)候，可以通過將事件添加到它們的上級元素而將事件委托給上級元素來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機(jī)制。事件代理用到了兩個(gè)在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標(biāo)元素。

事件委托優(yōu)點(diǎn)：

1、減少事件注冊，節(jié)省內(nèi)存。比如，

2、在table上代理所有td的click事件。

3、在ul上代理所有l(wèi)i的click事件。

4、簡化了dom節(jié)點(diǎn)更新時(shí)，相應(yīng)事件的更新。比如

5、不用在新添加的li上綁定click事件。

6、當(dāng)刪除某個(gè)li時(shí)，不用移解綁上面的click事件。

事件委托缺點(diǎn)：

1、事件委托基于冒泡，對于不冒泡的事件不支持

2、層級過多，冒泡過程中，可能會(huì)被某層阻止掉。

3、理論上委托會(huì)導(dǎo)致瀏覽器頻繁調(diào)用處理函數(shù)，雖然很可能不需要處理。所以建議就近委托，比如在table上代理td，而不是在document上代理td。

4、把所有事件都用代理就可能會(huì)出現(xiàn)事件誤判。比如，在document中代理了所有button的click事件，另外的人在引用改js時(shí)，可能不知道，造成單擊button觸發(fā)了兩個(gè)click事件。