浏览器事件执行顺序
2019-05-21 本文已影响0人
Eternal丶星空
总结：从捕获到冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="x1" class="x1"><!-- 捕获阶段执行 -->
<div id="x2" class="x2"><!-- 冒泡阶段执行 -->
<div id="x3" class="x3"></div><!-- 捕获阶段执行 -->
</div>
</div>
</body>
<style>
.x1{
border: 1px solid red;
height: 50vh;
width: 50vh;
}
.x2{
border: 1px solid green;
height: 30vh;
width: 30vh;
}
.x3{
border: 1px solid yellow;
height: 10vh;
width: 10vh;
}</style>
<script>
x1.addEventListener('click',function(e){
console.log('x1')
},true)
x2.addEventListener('click',function(e){
console.log('x2')
},false)
x3.addEventListener('click',function(e){
console.log('x3')
},true)
</script>
</html>
