浏览器事件执行顺序

总结：从捕获到冒泡

<!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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容