事件基础三

最新推荐文章于 2022-04-28 04:47:01 发布

Mr Gong

最新推荐文章于 2022-04-28 04:47:01 发布

阅读量282

点赞数

分类专栏： DOM JS

本文链接：https://blog.csdn.net/GYZ_Code/article/details/76864539

版权

DOM 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">

        div{padding: 50px;}
        #div1{background: #1836EC;}
        #div2{background: #D43434;}
        #div3{background: #CFF6AE;}

    </style>
</head>
<script>

    /*
        事件冒泡 当一个元素接收到事件的时候，会把他接收到的事件传播给父级，一直到顶层window,这种现象称为事件冒泡或事件冒泡机制

        当一个元素的事件和一个事件函数绑定的时候，元素接收到事件之后就会去执行这个事件函数，当没有和事件函数绑定的时候，也不会影响这个元素接收一个事件 

     */

    window.onload=function (){

        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;
        // oDiv3.onclick=fn;

    }


</script>
<body>
    <div id="div1">1
        <div id="div2">2
            <div id="div3">3</div>
        </div>
    </div>
</body>
</html>

事件冒泡下拉菜单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">

        div{width: 100px;height: 200px;border:1px solid #f00;display: none;}

    </style>
</head>

<script type="text/javascript">

    /*
        阻止冒泡   在接收事件的元素的事件函数中调用   event.cancelBubble=true;
    */

    window.onload=function (){

        oBtn=document.getElementsByTagName('button')[0];
        oDiv=document.getElementsByTagName('div')[0];

        oBtn.onclick=function (ev){

            var ev = ev || event;

            oDiv.style.display='block';

            event.cancelBubble=true;//阻止当前对象的当前事件的冒泡

        }

        document.onclick=function (){

                oDiv.style.display='none';

        }

    }


</script>
<body>

    <button>展开</button>
    <div></div>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>   
</body>
</html>

事件冒泡分享菜单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">
        body{margin:0;}
        #div1{width: 200px;height: 300px;background: #f00;position: absolute;top: 100px;left: -200px;}
        #div2{position: absolute;top: 0;right: -50px;width: 50px;height: 50px;background: #4714E5;color: #fff;}

    </style>
</head>

<script type="text/javascript">

    /*

        阻止冒泡   在接收事件的元素的事件函数中调用   event.cancelBubble=true;

     */

    window.onload=function (){

        var oDiv=document.getElementById('div1');
        /*
            div2接收到鼠标移入事件后，通过冒泡机制传递给div1
        */

        oDiv.onmouseover=function (){

            oDiv.style.left=0;

        }

        oDiv.onmouseout=function (){

            oDiv.style.left=-200+'px';

        }

    }


</script>
<body>

    <div id="div1"><div id="div2">分享到</div></div>


</body>
</html>

Mr Gong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件基础三

事件冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡</title> <style type="text/css"> div{padding: 50px;} #div1{background: #1836EC;} #div2{b
复制链接

扫一扫