事件冒泡与事件捕获

最新推荐文章于 2024-05-18 03:07:39 发布

学历大专志向远方

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量72

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_54350973/article/details/128349279

版权

概念

事件捕获：事件捕获就是从上往下一级一级往下找，先找父级在找子级（如下图）
先捕获，再冒泡！

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递（如下图）
大白话：冒泡就是类似于试水里的气泡，一直向上冒，所以叫冒泡嘛

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>捕获与冒泡</title>
  <style>
    .div1{
      width: 600px;
      height: 600px;
      background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .div2{
      width: 400px;
      height: 400px;
      background-color: rgb(227, 75, 75);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .div3{
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2">
      <div class="div3"></div>
    </div>
  </div>
  <script>
    const div1 = document.querySelector('.div1')
    const div2 = document.querySelector('.div2')
    const div3 = document.querySelector('.div3')
    div1.onclick = () => {
      console.log(111);
    }
    div2.onclick = () => {
      console.log(222);
    }
    div3.onclick = () => {
      console.log(333);
    }
  </script>
</body>
</html>

当我点击最里面的蓝色div3
可以看到分别输出3-2-1，原理：先是事件捕获从外到内，然后捕获到触发点击事件的div3，再从触发的事件开始向外冒泡，一直冒泡的最外层
当我点击最中间的蓝色div2
可以看到分别输出 2-1，原理：先是事件捕获从外到内，然后捕获到触发点击事件的div2，再从触发的事件开始向外冒泡，一直冒泡的最外层div1；