機制
IE10以下沒有捕獲階段
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件機制</title>
</head>
<body >
<div id="parent" style="height: 400px;width: 400px;background-color: cadetblue">
<div id="child" style="height: 200px;width: 200px; margin:0 auto; background-color: bisque" onclick="console.log('捕獲之前 child self click')">
</div>
</div>
<script>
document.body.addEventListener("click",function () {
console.log('捕獲 body click')
},true);
document.getElementById('parent').addEventListener("click",function () {
console.log('捕獲 parent click')
},true);
document.getElementById('child').addEventListener("click",function () {
console.log('捕獲 child click')
},true);
document.getElementById('parent').onclick =function(){
console.log('捕獲之後 parent self click')
}
document.body.addEventListener("click",function () {
console.log('冒泡 body click')
},false);
document.getElementById('parent').addEventListener("click",function () {
console.log('冒泡 parent click')
},false);
document.getElementById('child').addEventListener("click",function () {
console.log('冒泡 child click')
},false);
document.body.onclick =function(){
console.log('冒泡之後 body self click')
}
</script>
</body>
</html>
點選child的列印效果
解釋效果
事件捕獲是由外而内的，目标事件是在自身觸發的（目标事件過程，與事件聲綁定順序有關，先綁定先發生，它不遵守先捕獲後冒泡），事件冒泡是由内而外的。
關鍵點
- child，當事件從上至下捕獲的時候，到了child節點的時候，從開篇的圖中，應該是先執行捕獲，在執行目标，但是這裡是先執行了目标，在執行了捕獲，因為目标過程隻與綁定的先後順序有關，先綁定先執行。
- parent，當事件從下至上開始冒泡的時候，parent的目标在冒泡綁定之前，是以先執行。
- body，同理自然
總結
事件執行順序是從上至下，先執行捕獲事件，當執行到目标節點的時候，目标過程與綁定順序有關，繼而從下至上開始執行冒泡事件。