事件冒泡和事件捕获

最新推荐文章于 2024-06-23 08:00:00 发布

7束QW

最新推荐文章于 2024-06-23 08:00:00 发布

阅读量235

点赞数

分类专栏：事件冒泡和事件捕获文章标签： javascript css html

本文链接：https://blog.csdn.net/v8min/article/details/111144441

版权

事件冒泡和事件捕获专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件的三个阶段

捕获阶段
当前目标阶段
冒泡阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段
冒泡事件：事件由目标元素往外层触发，至document元素

 <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: cyan;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: darkorange;
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            background-color: darkorchid;
        }
    </style>
</head>

<body>
    <div class="box1" id="box1">
        box1
        <div class="box2" id="box2">
            box2
            <div class="box3" id="box3">box3</div>
        </div>
    </div>

<script>
        //获取元素
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var box3 = document.getElementById('box3')

        //注册监听事件  三个盒子都注册  
        //addEventLister有三个参数 第三个参数就是false的时候  表示是冒泡事件  也是默认的   档第三个参数是true的时候就是捕获事件  
        box1.addEventListener('click', function() {
            console.log('box1');
        }, false)
        box2.addEventListener('click', function() {
            console.log('box2');
        }, false)
        box3.addEventListener('click', function() {
            console.log('box3');
        }, false)
    </script>

运行结果：依次点击

//依次点击box3  box2  box1
.冒泡 box3
.冒泡 box2
.冒泡 box1

.冒泡 box2
.冒泡 box1

.冒泡 box1

捕获事件：事件由外开始接受事件，至目标元素。

 <script>
 		//css代码和冒泡事件一样的  
        //获取元素
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var box3 = document.getElementById('box3')

        //注册监听事件  三个盒子都注册  
        //addEventLister第三个参数修改为true
        box1.addEventListener('click', function() {
            console.log('box1');
        }, true)
        box2.addEventListener('click', function() {
            console.log('box2');
        }, true)
        box3.addEventListener('click', function() {
            console.log('box3');
        }, true)
    </script>

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

//依次点击box3  box2  box1
捕获 box1
捕获 box2
捕获 box3

捕获 box1
捕获 box2

捕获 box1

解决冒泡事件的方法：

方法一：在js中加上代码e.stopPropagation()，IE则是使用e.cancelBubble = true
在js中加上代码即可

<script>
        //获取元素
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var box3 = document.getElementById('box3')

        //注册监听事件  三个盒子都注册  
        //addEventLister有三个参数 第三个参数就是false的时候  表示是冒泡事件  也是默认的   档第三个参数是true的时候就是捕获事件  
        box1.addEventListener('click', function() {

            console.log('box1');
        }, false)
        box2.addEventListener('click', function() {
            console.log('box2');
        }, false)
        box3.addEventListener('click', function(e) {
            e = e || window.event //处理兼容性问题
                //取消冒泡
            e.stopPropagation()
                // ie低版本取消冒泡 
                // e.cancelBubble = true
            console.log('box3');
        }, false)
    </script>

运行结果：

//此时点击box3
box3

方法二：在注册事件的时候直接使用onmouseleave 和onmouseenter 因为它们不会触发冒泡事件

 box1.onmouseenter = function() {
            console.log('box1');

        }
        box2.onmouseenter = function() {
            console.log('box2');

        }
        box3.onmouseenter = function() {
            console.log('box3');

        }

运行结果：

//此时进入box1 box2 box3
box1
box2
box3

总结：false 冒泡事件 true捕获事件
解决方法：JS代码中加上e.stopPropagation()
注册事件用onmouseleave 和onmouseenter 因为它们不会触发冒泡事件