DOM的事件有三个阶段
1.捕获
2.处于目标
3.冒泡
其中addEventListener监听事件的时候第三个参数默认为false
当第三个参数不设置或者设置为false时,事件在冒泡阶段触法(由内到外,先执行子事件,再执行父事件)
当设置为true时,事件在捕获阶段就触法(由外到内,先执行父事件)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="d1">
<div class="d2">ooo</div>
</div>
<div class="d3">
<div class="d4">123</div>
</div>
<script>
let d1 = document.getElementsByClassName('d1')[0];
let d2 = document.getElementsByClassName('d2')[0];
d1.addEventListener('click',function(){console.log('d1,false')},false);
d1.addEventListener('click',function(){console.log('d1,true')},true);
d2.addEventListener('click',function(){console.log('d2,false')},false);
d2.addEventListener('click',function(){console.log('d2,true')},true);
let d3 = document.getElementsByClassName('d3')[0];
let d4 = document.getElementsByClassName('d4')[0];
d3.addEventListener('click',function(){console.log('d3,true')},true);
d3.addEventListener('click',function(){console.log('d3,false')},false);
d4.addEventListener('click',function(){console.log('d4,true')},true);
d4.addEventListener('click',function(){console.log('d4,false')},false);
</script>
</body>
</html>
点击时输出
d1,true
d2,false
d2,true
d1,false
d3,true
d4,true
d4,false
d3,false