本文實例分析了JS冒泡事件與事件捕獲。分享給大家供大家參考，具體如下：
案例
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件</title>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(){
alert("Window"); // 頂級
};
document.onclick = function(){
alert("Document"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html"); // 次次頂級
};
document.body.onclick = function(){
alert("Body"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div"); // 最先執行，並且會傳遞到上一層。點擊兩次，則按順序執行兩次。如果上級也有點擊事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結
1.點擊myDiv。依次是Div-Body-Html-Document-Window
2.點擊其他空白地方。依次是Html-Document-Window
3.連續點擊兩次，會按順序執行兩次
4.冒泡的前提是，父級也定義了相應的事件
再看一個更復雜的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕獲階段執行 ,false- false- 默認。事件句柄在冒泡階段執行
document.addEventListener("click", function(){
alert("Document - true");
}, true);
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕獲階段執行 ,false- false- 默認。事件句柄在冒泡階段執行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執行，並且會傳遞到上一層。點擊兩次，則按順序執行兩次。如果上級也有點擊事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結
1.點擊的執行結果是
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2.順序與js代碼順序無關
3.就算沒有定義點擊事件，一樣可以捕獲點擊事件，只要點擊到，就能捕獲到
再次改造，阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener("click", function(){
alert("Document - true");
}, true);
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕獲階段執行 ,false- false- 默認。事件句柄在冒泡階段執行
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕獲階段執行 ,false- false- 默認。事件句柄在冒泡階段執行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執行，並且會傳遞到上一層。點擊兩次，則按順序執行兩次。如果上級也有點擊事件的話
event.stopPropagation(); // 阻止冒泡
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
終止了，沒有後續的內容了
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。