JavaScript是網頁開發中的重要語言，可以使得網頁動態化、交互性增強。事件代理是JavaScript中常使用的編程技巧，本文將詳細介紹什么是事件代理，以及它的應用場景和具體實現方式。 事件代理是指將事件處理程序添加到一個父元素上，而不是每個子元素都添加一個事件處理程序。比如有一個ul列表中包含多個li元素，我們想要為每個li元素添加點擊事件響應。這個場景下，傳統的做法是遍歷所有li元素，為每個li元素都添加一個點擊事件觸發函數。然而，如果有n個li元素，那么就需要添加n個事件響應函數，這將導致性能問題。而事件代理則能解決這個問題。 下面來看一個具體的例子。假如我們有一個todo list界面，其中有多個任務（task）可以點擊標記為完成（done），我們可以通過以下代碼為每個task添加點擊事件響應函數： ``` //獲取所有class名為task的元素 const tasks = document.querySelectorAll('.task'); tasks.forEach(task =>{ //給每個task添加事件處理程序 task.addEventListener('click', function(e) { //標記為已完成 task.classList.toggle('done'); }); }); ``` 這段代碼的問題在于調用了多次addEventListener()方法，這樣浪費了大量資源，特別是當任務數很大時會更為明顯。而如果使用事件委托，則可以通過將事件綁定在其父節點上來解決這個問題。 ``` //獲取父元素列表 const parent = document.querySelector('.task-list'); //將事件處理程序綁定到父元素 parent.addEventListener('click', function(e) { //判斷當前事件對象是否為task元素 if (e.target.classList.contains('task')) { //標記為已完成 e.target.classList.toggle('done'); } }); ``` 這段代碼只綁定了一次事件處理函數，當被點擊的元素被觸發時，事件會冒泡到父元素，從而執行事件處理函數。而隨后的if語句判斷被點擊的元素是否滿足要求，從而進行后續處理。這種方法雖然需要判斷被觸發元素的類型，但由于只需要綁定一次事件，所以在性能方面更具有優勢。 需要注意的是，事件委托時需要選擇一個合適的父元素，不應該選擇body或document等過于龐大的元素，否則事件冒泡會觸發更多的事件處理函數。因此，需要借助CSS選擇器和HTML標簽結構，選擇最合適的父元素。 總之，事件代理可以在大幅降低代碼復雜度、提升性能的同時，提升代碼的可維護性、可擴展性和靈活性。因此，在實際開發中，我們推薦盡可能使用事件委托來處理頁面上的DOM事件。