js事件冒泡和阻止事件冒泡

1,什么是事件冒泡

有层级关系的一连串的盒子都添加了事件,触发子盒子的事件是,该子盒子的父级及以上的元素的事件也会被触发;

如下面的代码,当我们点击子盒子dv3时,父盒子dv2,dv1的点击事件也会被触发,这就是事件冒泡

<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        #dv1{
            width: 500px;
            height: 500px;
            background-color: #FF0000;
        }
        #dv2{
            width: 400px;
            height: 400px;
            background-color: lightblue;
        }
        #dv3{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="dv1">
        <div id="dv2" >
            <div id="dv3"></div>
        </div>
    </div>
    <script src="public.js"></script>
    <script>
        //什么是事件冒泡
        // 给3个div都添加事件
        my$('dv1').onclick = function(){
            alert("div1事件触发");
        };
        my$('dv2').onclick = function(){
            alert("div2事件触发");
        };
        my$('dv3').onclick = function(){
            alert("div3事件触发");
        };

    //    当点击子集元素  触发点击事件时候,父级元素的点击事件也会被触发,这就是 事件冒泡
    </script>
</body>

2,阻止事件冒泡

阻止事件冒泡有两种方式

1,在要要触发的点击事件函数中写 window.event.cancelBubble = true 这种方法 IE 和谷歌支持,而火狐不支持

2,在事件处理函数中传入一个对象参数, 在函数中添加对象参数.stopPropagation;

 <style>
        #dv1{
            width: 500px;
            height: 500px;
            background-color: #FF0000;
        }
        #dv2{
            width: 400px;
            height: 400px;
            background-color: lightblue;
        }
        #dv3{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="dv1">
        <div id="dv2" >
            <div id="dv3"></div>
        </div>
    </div>
    <script src="public.js"></script>

    <script>

        my$('dv1').onclick = function(){
            console.log("这是div1");
        };
        my$('dv2').onclick = function(){
            console.log("这是div2");
        };

        //第一种方法;
        // my$('dv3').onclick = function(){
        //     console.log("这是div3");
        //     window.event.cancelBubble = true; // ie  和 谷歌支持
        //     //添加阻止事件冒泡后  点击子盒子  父级盒子的事件不会被触发
        // };


        //第二种方法
        my$('dv3').onclick = function(e){
            console.log("这是div3");
            e.stopPropagation();//  火狐和谷歌支持  ie不支持
        };


    </script>

3事件的三阶段

事件捕获阶段

目标阶段

事件冒泡阶段

在事件处理函数中传入一个对象参数, 对象参数.eventPhase 属性可以判断事件处于哪个阶段该值为1 则是事件捕获阶段

2 为目标阶段 3位事件冒泡阶段, 在addEventListener()方法中第三个参数可以控制事件的阶段,false设置对象为冒泡阶段, true设置对象为为捕获阶段

<body>
    <div id="dv1">
        <div id="dv2" >
            <div id="dv3"></div>
        </div>
    </div>
<script>
    /*
    *
    *
    * 事件有三个阶段:
    * 1,事件捕获阶段: 由外到内
    * 2,事件目标阶段: 最开始选择的那个
    * 3,事冒泡阶段: 由内到外
    *
    *
    *   事件对象.eventPhase属性可以查看事件触发是所处的阶段
    *   它会返回属性值
    *   1---捕获阶段
    *   2---目标阶段
    *   3---事件冒泡阶段
    *
    *   addEventListener("事件类型",事件处理函数,控制事件的阶段)
    *
    *   控制事件的阶段有两个参数值
    *   false---由内到外
    *   true---由外到内
    *
    *
    *   window.event和参数e都是事件处理参数
    *
    * */
</script>
<script src="public.js"></script>
    <script>
        var arr = [my$('dv1'),my$('dv2'),my$('dv3')];
        for(var i = 0; i < arr.length; i++){
            var obj = arr[i];
            obj.addEventListener("click",function (e) {
                console.log(this.id + '=====' + e.eventPhase)
            },false)
        }
    </script>

js事件冒泡和阻止事件冒泡

1,什么是事件冒泡

2,阻止事件冒泡

3事件的三阶段

猜你喜欢