什么是事件流
事件流指的是，当有事件发生时，当前节点和根节点之间按照一定的顺序传播的过程就是事件流，通常会分为冒泡事件和捕获事件，而这两种事件传播过程恰好是相反的
冒泡事件
当我们点击span时候，span会首先接收到click事件，接下来事件会继续向父元素传播，div->body->html->document会由子到父的依次传播，直到传递给document，这种传播流程我们称为冒泡事件,默认情况下我们所添加的事件都是冒泡事件
冒泡事件特性的妙用：事件代理
如果我们想要获取span的点击事件，通常是这样的
var spanList = document.getElementsByTagName("span")
console.log(span);
for(let i=0;i<spanList.length;i++){
spanList[i].onclick = function(){
console.log('span');
}
}
现在我们利用事件代理来实现：父节点接受委托给子节点分配点击事件
// 给父层元素绑定事件
document.getElementById('div').addEventListener('click', function (e) {
var target = event.target || event.srcElement;
console.log(event.target.textContent)
});
这样通过代理的方式，我们可以减少事件绑定数量，减少内存消耗
阻止冒泡事件
<body onclick="handleClickBody()">
<div onclick="handleClickDiv()">
<button id="btn1" onclick="handleClickBtn1(event)">
按钮
</button>
</div>
</body>
<script>
// 第一种方法
function handleClickBtn1(e){
console.log(e);
console.log('点击htn1');
e.stopPropagation();
}
// 第二种方法
var bd = document.getElementById("btn1");
bd.addEventListener("click", function (event) {
if (event.target == this) {
//判断是否是当前绑定事件的元素元素触发的该事件
console.log("按钮被点击了");
event.cancelBubble = true;
}
});
//解决兼容性问题，在低版本浏览器中（IE 6-8 ）通常是利用事件对象cancelBubble属性来操作的
function handleClickBtn1(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
</script>
捕获事件
捕获事件与冒泡事件恰好相反，我们想要捕获事件就需要使用addEventListener方法，将第三个参数给为true,那这个就开始进行捕获，捕获事件就调用回调函数,它的传播是doucment->body->div->span
document.getElementsByTagName('document').addEventListener('click',function () {
console.log('document')
},true)
document.getElementsByTagName('html').addEventListener('click',function () {
console.log('html')
},true)
document.getElementsByTagName('div').addEventListener('click',function () {
console.log('div')
},true)
document.getElementsByTagName('span').addEventListener('click',function () {
console.log('span')
},true)
addEventListener 介绍
addEventListener( name , function , boolean )
boolean (true) :该事件为捕获事件，当事件触发时候，在捕获阶段就执行
boolean (false) :该事件为冒泡事件，当事件触发时候，在冒泡阶段就执行
事件流程 ：
-
span 被点击
-
document上面绑定了捕获事件，会执行document上面的捕获事件
-
html上面绑定了捕获事件，会执行html上面的捕获事件
-
div上面绑定了捕获事件，会执行div上面的捕获事件
-
span上面绑定了捕获事件，会执行span上面的捕获事件
-
span上面绑定了冒泡事件，会执行span上面的冒泡事件
-
div上面绑定了冒泡事件，会执行div上面的冒泡事件
8.html上面绑定了冒泡事件，会执行html上面的冒泡事件
9.document上面绑定了冒泡事件，会执行document上面的冒泡事件
10.结束
总结
事件流就是页面中元素接收事件的顺序，从捕获事件到冒泡事件的传播，是一种U形事件传播过程
如有错误欢迎指正，希望和同学们互相学习，共同进步，加油！
