冒泡事件

最新推荐文章于 2022-11-10 10:58:50 发布

君绾

最新推荐文章于 2022-11-10 10:58:50 发布

阅读量173

点赞数

分类专栏： my js 文章标签： JavaScript

本文链接：https://blog.csdn.net/wing_annuan/article/details/103265763

版权

my 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

冒泡事件：
给元素添加某一事件的时候，那么触发这个事件的时候，根据dom结构触发同类事件，知道最顶峰层对象一般的浏览器都是window，ie8浏览是document
事件的捕获：
从最底层往下捕获，直到捕获到元素为止就停止传播

        事件执行的机制：时间的冒泡和事件的捕获
        默认为事件的冒泡
        如果想要执行事件捕获，那么addEventListenter（事件类型，处理函数，Boolean）
        第三个参数默认为false（事件冒泡）
        第三个参数为true的时候，那么就表示事件捕获

<!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>
      .outer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
        background: #58bc58;
      }

      .center {
        width: 300px;
        height: 300px;
        background: #58a;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .inner {
        width: 200px;
        height: 200px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="center">
        <div class="inner"></div>
      </div>
    </div>
    <script>
      /* 
        
        
        */
      var inner = document.querySelector(".inner");
      var center = document.querySelector(".center");
      var outer = document.querySelector(".outer");

      inner.addEventListener(
        "click",
        function(e) {
          console.log("inner");
        },
        true
      );
      center.addEventListener(
        "click",
        function() {
          console.log("center");
        },
        true
      );
      outer.addEventListener(
        "click",
        function() {
          console.log("outer");
        },
        true
      );
      document.body.addEventListener(
        "click",
        function() {
          console.log("body");
        },
        true
      );
    </script>
  </body>
</html>

君绾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
冒泡事件

冒泡事件：给元素添加某一事件的时候，那么触发这个事件的时候，根据dom结构触发同类事件，知道最顶峰层对象一般的浏览器都是window，ie8浏览是document事件的捕获：从最底层往下捕获，直到捕获到元素为止就停止传播事件执行的机制：时间的冒泡和事件的捕获默认为事件的冒泡如果想要执行事件捕获，那么addEventListenter（...
复制链接

扫一扫

专栏目录