目录
资料
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()区别暂时没测试出来，都可以阻止，只要放在事件流对应位置就可以了。