JavaScript中的事件冒泡与委托

最新推荐文章于 2023-04-21 13:48:05 发布

学学学无止境

最新推荐文章于 2023-04-21 13:48:05 发布

阅读量172

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46872121/article/details/110489609

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一、事件冒泡

说明：
事件冒泡就是指事件向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发
下面以简单例子说明：

 <style>
    #box1 {
      background-color: pink;
      width: 300px;
      height: 300px;

    }
    span {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div id="box1">
    box1
    <span id="span1">我是span</span>
  </div>
  <script>
    window.onload = function () {
      var span1 = document.getElementById("span1")
      // var span1 = document.getElementByTagName("span");
      span1.onclick = function () {
        alert("我是span");
      };

      var box1 = document.getElementById("box1")
      // var span1 = document.getElementByTagName("span");
      box1.onclick = function () {
        alert("我是box1");
      };

      var body1 = document.body
      // var span1 = document.getElementByTagName("span");
      body1.onclick = function () {
        alert("我是body");
      };

    }
  </script>

分析：
1.其中我分别为span1、box1、body均设置了点击事件，当带点击相应的元素时，弹出相应的对话框
2.由于冒泡事件的作用机制，当我点击span1时，弹出alert(“我是span”)之后，相续弹出alert(“我是box1”);、alert(“我是body”);
在这里插入图片描述
3.若想取消冒泡事件，可以使用如下方法：

 var span1 = document.getElementById("span1")
      // var span1 = document.getElementByTagName("span");
      span1.onclick = function (event) {
        event = event || window.event;
        alert("我是span");
        event.cancelBubble = true;
      };

此时点击span时，不会再向其祖先元素冒泡相同的事件，若想使得box1也取消冒泡，同理设置即可；
在这里插入图片描述

二、事件委派

说明：
事件委派是指将事件统一绑定给元素的工通祖先元素，这样后代元素上的事件触发时，会一直冒泡到祖先元素上（即通过祖先元素相应来处理）
在这里插入图片描述

在这里插入图片描述

学学学无止境

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的事件冒泡与委托

一、事件冒泡说明：事件冒泡就是指事件向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发下面以简单例子说明： <style> #box1 { background-color: pink; width: 300px; height: 300px; } span { background-color: blue; } </style></head><bod
复制链接

扫一扫