JS事件冒泡

最新推荐文章于 2022-08-25 11:56:10 发布

东方求败、

最新推荐文章于 2022-08-25 11:56:10 发布

阅读量1.0k

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： javascript html5 html

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120160353

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

JS事件冒泡

浏览器上事件天生一个特点：事件流
事件冒泡：由里向外逐级触发
事件捕获：由外向里逐级触发

组织事件冒泡：浏览器兼容问题
事件对象的属性和方法
cancelBubble=true （取消冒泡）
stopPropagation() （停止传播）

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{padding: 50px;}
        #div1{background-color: red;}
        #div2{background-color: blue;}
        #div3{background-color: orange;}
    </style>
    <script>
        window.onload = function(){
            var aDivs = document.getElementsByTagName("div");
            for(var i=0;i<aDivs.length;i++)
            {
                aDivs[i].onclick = function(ev){
                    var e = ev || window.event;
                    alert(this.id);
                }
            }
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <div id = 'div2'>
            <div id = 'div3'>
            </div>
        </div>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述
分析：
点击div3后,由于事件冒泡机制，事件由里向外逐级触发，输出div3,div2,div1;
同理点击div2后，输出div2,div1;点击div1，输出div1

阻止事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{padding: 50px;}
        #div1{background-color: red;}
        #div2{background-color: blue;}
        #div3{background-color: orange;}
    </style>
    <script>
        window.onload = function(){
            var aDivs = document.getElementsByTagName("div");
            for(var i=0;i<aDivs.length;i++)
            {
                aDivs[i].onclick = function(ev){
                    var e = ev || window.event;
                    alert(this.id);
                    //e.cancelBubble = true;
                   //e.stopPropagation();
                   stopBubble(e);
                }
            }
        }

        //封装跨浏览器兼容的阻止事件冒泡
        function stopBubble(e){
            if(e.cancleBubble)
            {
                e.cancleBubble = ture;
            }else{
                e.stopPropagation();
            }
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <div id = 'div2'>
            <div id = 'div3'>
            </div>
        </div>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述

东方求败、

关注

0
点赞
踩
0

收藏

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

JS事件冒泡浏览器上事件天生一个特点：事件流事件冒泡：由里向外逐级触发事件捕获：由外向里逐级触发组织事件冒泡：浏览器兼容问题事件对象的属性和方法cancelBubble=true （取消冒泡）stopPropagation() （停止传播）例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con
复制链接

扫一扫