如今的JavaScript技術界裡最火熱的一項技術應該是『事件委託(event delegation)』了。使用事件委託技術能讓你避免對特定的每個節點增加事件監聽器；相反，事件監聽器是被加入到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找出是哪個子元素的事件。基本概念非常簡單，但仍有許多人不理解事件委託的工作原理。這裡我將要解釋事件委託是如何運作的，並提供幾個純JavaScript的基本事件委託的例子。
假定我們有一個UL元素，它有幾個子元素：
<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li> </ul>
我們也假設，當每個子元素被點擊時，將會有各自不同的事件發生。你可以為每個獨立的li元素添加事件監聽器，但有時這些li元素可能會被刪除，可能會有新增，監聽它們的新增或刪除事件將會是一場惡夢，尤其是當你的監聽事件的程式碼放在另一個應用程式的地方時。但是，如果你將監聽器安置到它們的父元素上呢？你如何能知道是那個子元素被點擊了？
簡單：當子元素的事件冒泡到父ul元素時，你可以檢查事件物件的target屬性，捕捉真正被點擊的節點元素的引用。以下是一段很簡單的JavaScript程式碼，示範了事件委託的過程：
// 找到父元素，添加监听器...
document.getElementById("parent-list").addEventListener("click",function(e) {
// e.target是被点击的元素!
// 如果被点击的是li元素
if(e.target && e.target.nodeName == "LI") {
// 找到目标，输出ID!
console.log("List item ",e.target.id.replace("post-")," was clicked!");
}
});第一步是為父元素新增事件監聽器。當有事件觸發監聽器時，檢查事件的來源，排除非li子元素事件。如果是一個li元素，我們就找到目標了！如果不是一個li元素，事件將被忽略。這個例子非常簡單，UL和li是標準的父子搭配。讓我們來試驗一些差異比較大的元素搭配。假設我們有一個父元素p，裡面有很多子元素，但我們關心的是裡面的一個帶有」classA」 CSS類別的A標記：
// 获得父元素p, 添加监听器...
document.getElementById("myp").addEventListener("click",function(e) {
// e.target是被点击的元素
if(e.target && e.target.nodeName == "A") {
// 获得CSS类名
var classes = e.target.className.split(" ");
// 搜索匹配!
if(classes) {
// For every CSS class the element has...
for(var x = 0; x < classes.length; x++) {
// If it has the CSS class we want...
if(classes[x] == "classA") {
// Bingo!
console.log("Anchor element clicked!");
// Now do something here....
}
}
}
}
});上面這個範例中不僅比較了標籤名，也比較了CSS類別名稱。雖然稍微複雜了一點，但還是很有代表性的。例如，如果某個A標記裡有一個span標記，則這個span將會成為target元素。這時候，我們需要上溯DOM樹結構，找到裡面是否有 A.classA 的元素。
因為大部分程式設計師都會使用jQuery等工具庫來處理DOM元素和事件，我建議大家都使用裡面的事件委託方法，因為這裡工具庫裡都提供了高級的委託方法和元素甄別方法。
希望這篇文章能幫助你理解JavaScript事件委託的幕後原理，希望你也感受到了事件委託的強大用處！
(英文：davidwalsh.)
推薦教學：《javascript基礎教學》
以上是JavaScript事件委託的技術原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
