WebAPI之事件冒泡

最新推荐文章于 2024-07-18 07:00:00 发布

Cc.＇沐艿伊℡

最新推荐文章于 2024-07-18 07:00:00 发布

阅读量246

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/92852045

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

//1.事件冒泡:

多个元素嵌套, 有层次关系, 这些元素都注册了相同的事件,如果里面的元素的事件触发了. 外面的元素也会自动地触发
由内到外触发
需要阻止事件冒泡
event.stopPropagation(); --------->谷歌和火狐支持的. ie8不支持
window.event.cancelBubble = true; // ------>ie8特有的, 谷歌支持. 火狐支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 250px;
            height: 250px;
            background-color: pink;
        }
        #box2{
            width: 150px;
            height: 150px;
            background-color: lightcoral;
        }
        #box3{
            width: 70px;
            height: 70px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
<script src="common.js"></script>
<script>
    my$("box3").onclick = function (event) {
        console.log("里面的盒子");
//两个盒子绑定了相同的事件,因此需要给里面的盒子阻止冒泡
    event.stopPropagation(); --------->谷歌和火狐支持的.  ie8不支持
   // window.event.cancelBubble = true; // ------>ie8特有的, 谷歌支持. 火狐支持
   }
  my$("box2").onclick = function () {
    console.log("中间的盒子")
 }
</script>
</body>
</html>

//2.事件捕获

此时结构和事件冒泡结构一样

   //事件捕获:  从外向内触发
    my$("box1").addEventListener("click", function () {
        console.log("外面的盒子");
    },true);// 设置事件捕获, 从外向内出发
    my$("box2").addEventListener("click", function () {
        console.log("中间的盒子");
    }, true);
    my$("box3").addEventListener("click", function () {
        console.log("里面的盒子");
    },true)

点击box3,打印结果如下
在这里插入图片描述

//3.事件的三个阶段

事件的三个阶段: event.eventPhase通过这个属性知道当前的事件是什么阶段
* 属性的返回值:
* 1 ---->捕获阶段
* 2----->目标阶段
* 3----->冒泡阶段
*
* 冒泡阶段: 从里到外
* 捕获阶段: 从外到里
* 一般都是冒泡阶段

Cc.＇沐艿伊℡

关注

0
点赞
踩
0

收藏

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

//1.事件冒泡: 多个元素嵌套, 有层次关系, 这些元素都注册了相同的事件,如果里面的元素的事件触发了. 外面的元素也会自动地触发由内到外触发需要阻止事件冒泡event.stopPropagation(); --------->谷歌和火狐支持的. ie8不支持window.event.cancelBubble = true; // ------>ie8特有的, 谷歌支持. ...
复制链接

扫一扫

专栏目录