事件流-事件冒泡机制

最新推荐文章于 2023-07-13 11:46:30 发布

della_uii

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量323

点赞数

分类专栏： JavaScript 文章标签：事件冒泡

本文链接：https://blog.csdn.net/Della_UI/article/details/52968339

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。

先看一个关于事件冒泡的例子：

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");
        var oDiv3=document.getElementById("div3");

        function fn(){
            alert(this.id);
        }

        oDiv1.onclick=fn;  //div1
        oDiv2.onclick=fn;  //div2,div1
        oDiv3.onclick=fn;  //div3,div2,div1
    </script>
</body>

上例中，当点击oDiv3时，点击事件会向上传播到oDiv2、oDiv1，因此会依次弹出div3、div2、div1。

冒泡的影响的实例：
要实现效果：点击“显示”按钮时，下方的盒子显示，然后再点击文档其他区域时，盒子消失。

<body>
    <input id="input1" type="button" value="显示" />
    <div id="div1" style="width: 100px; height: 100px; background: orange; display: none;"></div>
    <script type="text/javascript">
        var oInput=document.getElementById("input1");
        var oDiv=document.getElementById("div1");

        oInput.onclick=function(){
            oDiv.style.display='block';
        }

        document.onclick=function(){
            oDiv.style.display='none';
        }
    </script>
</body>

点击“显示”按钮，发现盒子并没有显示，这是因为，点击oInput，事件会冒泡到document上，即在 oDiv.style.display=’block’ 的瞬间 oDiv.style.display=’none’。

阻止冒泡：

<body>
    <input id="input1" type="button" value="显示" />
    <div id="div1" style="width: 100px; height: 100px; background: orange; display: none;"></div>
    <script type="text/javascript">
        var oInput=document.getElementById("input1");
        var oDiv=document.getElementById("div1");

        oInput.onclick=function(ev){
            var ev= ev || window.event;
            ev.cancelBubble=true;  //阻止冒泡
            oDiv.style.display='block';
        }

        document.onclick=function(){
            oDiv.style.display='none';
        }
    </script>
</body>

实例应用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 200px;
                background: red;
                position: absolute;
                left: -100px;
                top: 100px;
            }
            #div2{
                width: 30px;
                height: 60px;
                background: black;
                color: white;
                text-align: center;
                position: absolute;
                right: -30px;
                top: 70px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">分享到</div>
        </div>
        <script type="text/javascript">
            var oDiv1=document.getElementById("div1");

            oDiv1.onmouseover=function(){
                oDiv1.style.left='0px';
            }

            oDiv1.onmouseout=function(){
                oDiv1.style.left='-100px';
            }
        </script>
    </body>
</html>

这里写图片描述

della_uii

关注

0
点赞
踩
0

收藏

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

IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。先看一个关于事件冒泡的例子：<body> <div id="div1"> <div id="div2"> <div id="div3"> </div>
复制链接

扫一扫