目錄
資料
https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html
https://www.cnblogs.com/zhuzhenwei918/p/6139880.html
https://www.cnblogs.com/lyz1991/p/5372696.html
上面三篇文章摘自網絡，也是我對DOM事件流學習的來源，如有侵權請聯繫刪除。
上面有的內容不多重複，主要記錄下自己的理解和關鍵點。
一、背景
DOM事件流在IE6、7、8或更早只支持事件冒泡。後面JS都是雙向支持（事件捕獲、事件冒泡）
二、探究
主角：userCapture（默認爲false：事件冒泡，若true：事件捕獲）
target.addEventListener(type, listener, useCapture);
原生事件綁定（匿名函數）
document.getElementById("btn").addEventListener("click",function(){...},false);
原生事件綁定
document.getElementById("btn").addEventListener("click",OnClickBtn,false);
jQuery事件綁定(等同於原生事件函數，並且useCapture爲默認值false)
$("#btn").click(function(){...});
不常用：函數指針爲變量賦值寫法（useCapture一樣默認爲false）
document.getElementById("btn").onclick = function(){...};
1、事件冒泡測試
<!DOCTYPE html>
<html>
<head>
<title>事件流測試</title>
<meta charset="utf-8">
</head>
<body>
<div id="first">
<div id="second" >
<div id="third" >
<button id="button">DOM事件</button>
</div>
</div>
</div>
<script>
document.getElementById("button").addEventListener("click",function(){
console.log("button");
},false);
document.getElementById("third").addEventListener("click",function(){
console.log("third");
},false);
document.getElementById("second").addEventListener("click",function(){
console.log("second");
},false);
document.getElementById("first").addEventListener("click",function(){
console.log("first");
},false);
</script>
</body>
</html>
DOM事件樹將是這個樣子的：
打印結果：
button
third
second
first
2、事件捕獲測試
相較上面的代碼，只將useCapturec參數由false（默認）改爲true，其它沒變
<!DOCTYPE html>
<html>
<head>
<title>事件流測試</title>
<meta charset="utf-8">
</head>
<body>
<div id="first">
<div id="second" >
<div id="third" >
<button id="button">DOM事件</button>
</div>
</div>
</div>
<script>
document.getElementById("button").addEventListener("click",function(){
console.log("button");
},true);
document.getElementById("third").addEventListener("click",function(){
console.log("third");
},true);
document.getElementById("second").addEventListener("click",function(){
console.log("second");
},true);
document.getElementById("first").addEventListener("click",function(){
console.log("first");
},true);
</script>
</body>
</html>
DOM事件樹：改變了useCapture的值，只是改變是它們的站位
打印結果：
frist
second
third
button
3、奇怪的測試
還是隻改變了useCapture的值，我是亂改的（上面鏈接中也有類似的測試）
<!DOCTYPE html>
<html>
<head>
<title>事件流測試</title>
<meta charset="utf-8">
</head>
<body>
<div id="first">
<div id="second" >
<div id="third" >
<button id="button">DOM事件</button>
</div>
</div>
</div>
<script>
document.getElementById("button").addEventListener("click",function(){
console.log("button");
},true);
document.getElementById("third").addEventListener("click",function(){
console.log("third");
},false);
document.getElementById("second").addEventListener("click",function(){
console.log("second");
},true);
document.getElementById("first").addEventListener("click",function(){
console.log("first");
},false);
</script>
</body>
</html>
上圖：
打印結果：
second
button
third
first
4、阻止事件冒泡/捕獲
stopImmediatePropagation() 和 stopPropagation()區別暫時沒測試出來，都可以阻止，只要放在事件流對應位置就可以了。