<!--
事件流
冒泡 从里向外
捕获 从外向里(ie不支持 )
既有捕获 又有冒泡 先捕获 后冒泡(先从外到里 再从里向外)
-->
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: #ff0000;
}
#div2{
width: 200px;
height: 200px;
background: #0000ff;
}
</style>
</head>
<body>
<div id="div1">
111
<div id="div2">
222
</div>
</div>
<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.addEventListener('click',function(){
console.log('div1 捕获');
},true)
oDiv2.addEventListener('click',function(){
console.log('div2 捕获');
},true)
oDiv1.addEventListener('click',function(){
console.log('div1 冒泡');
},false)
oDiv2.addEventListener('click',function(){
console.log('div2 冒泡');
},false)
</script>
</body>
</html>
结果:
![鼠标点击子元素div2,既有捕获 又有冒泡 先捕获 后冒泡(先从外到里 再从里向外)](https://img-blog.csdnimg.cn/20190725083914472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAyMTE5OQ==,size_16,color_FFFFFF,t_70)