如今的JavaScript技術界里最火熱的一項技術應該是‘事件委托(event delegation)'了。使用事件委托技術能讓你避免對特定的每個節點添加事件監聽器；相反，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。基本概念非常簡單，但仍有很多人不理解事件委托的工作原理。這里我將要解釋事件委托是如何工作的，并提供幾個純JavaScript的基本事件委托的例子。

假定我們有一個UL元素，它有幾個子元素：

復制代碼 代碼如下:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

復制代碼 代碼如下:

// 找到父元素，添加監聽器...
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!");
}
});

復制代碼 代碼如下:

// 獲得父元素DIV, 添加監聽器...
document.getElementById("myDiv").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....

}
}
}

}
});