目錄

?

概述

引入原因

具體寫法

適用場景

---

概述

“事件處理程序過多”問題的解決方案就是事件委托，利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

事件冒泡：由接收事件的元素開始，向上逐漸傳播。比如頁面結(jié)構(gòu)為document->html->body->div，當(dāng)點擊div時，首先觸發(fā)div的click事件，然后click事件向上傳播，在每一級上都會發(fā)生，直至傳播到document對象。

引入原因

事件處理程序過多，會導(dǎo)致整體頁面的運行性能。首先，每個函數(shù)都是對象，都會占用內(nèi)存，內(nèi)存中的對象越多，性能就越差；其次，必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。

<ul id="myList"><li id="item1">list item 1</li><li id="item2">list item 2</li><li id="item3">list item 3</li><li id="item4">list item 4</li> </ul>

如上述程序，假設(shè)每個li都有click點擊事件：
①不用事件委托：我們要一個個獲取到每個li再對它們添加click事件，要添加四個事件處理程序。
②使用事件委托：只需要在父節(jié)點即ul節(jié)點上添加事件，這樣就只需要取得一個DOM結(jié)點，只添加一個事件處理程序。
②相較于①，結(jié)果相同，但需要的內(nèi)存更少。

具體寫法

根據(jù)上述程序：

<!-- ①不用事件委托 --> var item1 = document.getElementById("item1"); var item2 = document.getElementById("item2"); var item3 = document.getElementById("item3"); var item4 = document.getElementById("item4"); item1.onclick = function(){console.log("I am item1"); } item2.onclick = function(){console.log("I am item2"); } item3.onclick = function(){console.log("I am item3"); } item4.onclick = function(){console.log("I am item4"); }<!-- 使用事件委托 --> var myList = document.getElementById("myList"); myList.onclick = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;switch(target.id){case "item1": console.log("I am item1");break;case "item2": console.log("I am item2");break;case "item3": console.log("I am item3");break;case "item4": console.log("I am item4");break;} }

適用場景

多數(shù)鼠標(biāo)事件和鍵盤事件。最適合采用該技術(shù)的事件有click,mousedown,mouseup,keydown,keyup,keypress，而mouseover和mouseout事件也冒泡，但由于經(jīng)常需要計算元素位置，因而要適當(dāng)處理它們并不容易。

本面試題為前端常考面試題，后續(xù)有機(jī)會繼續(xù)完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第三十三篇之事件委托（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。