<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<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>
<script>
document.getElementById("parent-list").addEventListener("click",function(e) {
// 檢查事件源e.targe是否為L(zhǎng)i
if(e.target && e.target.nodeName.toUpperCase() == "LI") {
// 真正的處理過(guò)程在這里
console.info(e.target)
console.log("List item ",e.target.id," was clicked!");
}
});
</script>
</body>
</html>
事件捕獲：當(dāng)某個(gè)元素觸發(fā)某個(gè)事件（如onclick）杰扫，頂層對(duì)象document就會(huì)發(fā)出一個(gè)事件流车猬，隨著DOM樹的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去玻佩，直到到達(dá)事件真正發(fā)生的目標(biāo)元素谐鼎。在這個(gè)過(guò)程中，事件相應(yīng)的監(jiān)聽函數(shù)是不會(huì)被觸發(fā)的段只。
事件目標(biāo)：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)鉴扫。如果沒有綁定監(jiān)聽函數(shù)赞枕，那就不執(zhí)行。
事件起泡：從目標(biāo)元素開始坪创，往頂層元素傳播炕婶。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會(huì)被一次觸發(fā)莱预。如果想阻止事件起泡柠掂，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來(lái)組織事件的冒泡傳播。
delegate.jpg
