前言公司產(chǎn)品部推出了一款新產(chǎn)品，經(jīng)理指派小A負(fù)責(zé)推廣工作。小A通過多方打聽了解到推廣流程，需要使用公司證件在幾個(gè)平臺(tái)注冊(cè)賬號(hào)，并經(jīng)過多輪審批。小A經(jīng)歷了一番操作后感到身心俱疲，最終成功將產(chǎn)品發(fā)布到公眾平臺(tái)上。與此同時(shí)，公司的競(jìng)爭(zhēng)部門也計(jì)劃推出一款新產(chǎn)品。由于內(nèi)部競(jìng)爭(zhēng)關(guān)系，他們無法讓小A協(xié)助推廣。只能自己再注冊(cè)一次。時(shí)間過后，另一個(gè)部門X也面臨類似的情況，老板覺得很繁瑣，決定從公司層面成立宣傳部，負(fù)責(zé)所有部門的宣傳工作。之后，任何部門有宣傳的需求，都可以向上委托給宣傳部，統(tǒng)一處理，提升了工作效率，減少了內(nèi)部消耗在現(xiàn)代Web開發(fā)中，當(dāng)我們需要處理大量DOM元素的事件時(shí)，單個(gè)的事件綁定方式可能會(huì)導(dǎo)致代碼冗長(zhǎng)而難以維護(hù)，同時(shí)也會(huì)影響性能。幸運(yùn)的是，JavaScript事件委托是一個(gè)優(yōu)雅的解決方案，它可以優(yōu)化代碼結(jié)構(gòu)并提升性能。讓我們來深入了解什么是事件委托，以及如何應(yīng)用它來改進(jìn)我們的代碼。

什么是事件委托

事件委托是一種設(shè)計(jì)模式，它利用了事件冒泡的機(jī)制。當(dāng)一個(gè)元素上的事件被觸發(fā)時(shí)，它會(huì)向上冒泡傳遞至父級(jí)元素，直至最頂層的文

展開說說

事件委托是建立在事件冒泡機(jī)制之上的，冒泡是指事件從觸發(fā)事件的元素開始，逐級(jí)向上觸發(fā)所有上級(jí)元素的過程。

接下來，讓我們歡迎千鋒虎哥為我們表演一個(gè)胸口碎大石。見他氣沉丹田后，發(fā)出一聲咆哮，只聽咔嚓一聲...

力量傳遞到第一層瓦片時(shí)，第二層、第三層，以及第n層依次受到力量的作用，就像事件冒泡的過程一樣。

接著看這個(gè)圖

在鼠標(biāo)點(diǎn)擊div1時(shí)，力量會(huì)逐級(jí)傳導(dǎo)到div2上，然后繼續(xù)傳導(dǎo)到div3，一直延伸至body，最終到達(dá)window。只要在對(duì)應(yīng)的元素上設(shè)置了點(diǎn)擊事件，該事件就會(huì)被觸發(fā)，并且按照冒泡的順序依次傳遞至父級(jí)元素

那么好，需求來了，現(xiàn)在需要div點(diǎn)擊的時(shí)候，縮小自己的寬和高，每次縮小到自己的百分之90，看效果

第一個(gè)想到的方案是為每個(gè)元素添加點(diǎn)擊事件，并需要阻止事件冒泡（自行查閱阻止冒泡）。

這代碼看著挺冗余啊，再提煉提煉，既然每個(gè)div觸發(fā)的事件都相同，能不能使用一個(gè)函數(shù)處理呢，可以的，接著看

確實(shí)簡(jiǎn)潔了不少。順便說說e.target，指哪個(gè)元素觸發(fā)了事件,e.target就是哪個(gè)元素對(duì)象

那能不能再簡(jiǎn)潔一點(diǎn)呢，既然有了冒泡。那div1、2點(diǎn)擊的時(shí)候，冒泡到div3上，只給div3做個(gè)點(diǎn)擊事件，是不是也行？來看看代碼

是不是x格一下子就高上來了，這種操作就叫做事件委托，把div1、div2事件委托給div3處理

這是工作摸魚、提升效率之利器

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

優(yōu)點(diǎn)：
●?減少事件處理程序的數(shù)量：通過將事件綁定在父元素上，可以避免給每個(gè)子元素都添加事件處理程序。這在處理大量元素時(shí)可以顯著減少代碼的復(fù)雜性和維護(hù)成本。
●?動(dòng)態(tài)添加元素支持：對(duì)于后續(xù)動(dòng)態(tài)添加的子元素，無需單獨(dú)為它們添加事件處理程序，因?yàn)槭录惺腔诟冈氐?，新添加的元素也?huì)受到委托的處理。
●?內(nèi)存和性能優(yōu)化：事件委托利用事件冒泡的特性，將事件處理放在父元素上，避免了在每個(gè)子元素上都綁定事件，從而節(jié)省內(nèi)存和提高性能。
●?方便綁定動(dòng)態(tài)元素：當(dāng)頁面中存在大量元素時(shí)，事件委托可以方便地處理動(dòng)態(tài)添加的元素，無需為新元素單獨(dú)添加事件監(jiān)聽。

缺點(diǎn)：
●?事件冒泡帶來的潛在問題：由于事件冒泡的特性，事件委托可能導(dǎo)致事件在父元素上被多次觸發(fā)，這可能會(huì)影響性能和產(chǎn)生不良影響。為了避免這個(gè)問題，需要在事件處理程序中正確判斷事件源。
●?不適用于所有情況：并非所有事件都適合使用事件委托。例如，如果需要在不同階層的元素上綁定不同的事件處理程序，或者需要對(duì)事件進(jìn)行捕獲階段的處理，事件委托可能無法滿足需求。
●?事件目標(biāo)確定：在事件委托中，需要通過事件對(duì)象的target屬性來確定真正的事件目標(biāo)，這可能會(huì)涉及到一些復(fù)雜的邏輯。

總結(jié):

總體來說，事件委托是一種非常有用的技術(shù)，特別適合處理大量元素的事件處理。它可以提高代碼效率、減少內(nèi)存占用，并且方便處理動(dòng)態(tài)添加的元素。然而，需要注意避免潛在的問題，以確保事件委托的正確使用。