前端html捕获和冒泡

laoli815

已于 2024-04-19 13:14:39 修改

阅读量1.1k

点赞数 17

文章标签：前端 html

于 2024-04-18 16:27:30 首次发布

本文链接：https://blog.csdn.net/laoli815/article/details/137924921

版权

本文详细解释了冒泡事件和捕获事件的工作原理，以及stopPropagation和stopImmediatePropagation的区别，通过JavaScript代码示例展示了如何在DOM事件中控制事件的传播顺序。

摘要由CSDN通过智能技术生成

冒泡事件：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。

捕获事件：网景公司提出的，事件由父元素传递到子元素的过程叫做事件捕获（ture）。

2.冒泡事件与捕获事件的区别
冒泡事件：事件从子级向父级传递。捕获事件：事件从父级传递向子级。
在这里插入图片描述
正常代码不阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <script>
        var father=document.querySelector('.father')
        var son=document.querySelector('.son')
        father.addEventListener('click',function(e){
            console.log('我是父级')
        },{capture:false})
        son.addEventListener('click',function(e){
            console.log('我是子级')
            console.log('调用')
        },{capture:false})
        son.addEventListener('click',function(e){
            console.log('我是子级2')
            console.log('调用2')
        },{capture:false})
    </script>
</body>
</html>

点击son结果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <script>
        var father=document.querySelector('.father')
        var son=document.querySelector('.son')
        father.addEventListener('click',function(){
            alert('我是父级')
        })
        son.addEventListener('click',function(e){
            alert('我是子级')
            e.stopPropagation()
            alert('调用')
        })
        son.addEventListener('click',function(e){
            alert('我是子级2')
            e.stopPropagation()
            alert('调用2')
        })
    </script>
</body>
</html>

如果只是点击son返回结果
在这里插入图片描述
注意到这里面son区域两个监听都执行
代码修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <script>
        var father=document.querySelector('.father')
        var son=document.querySelector('.son')
        father.addEventListener('click',function(){
            console.log('我是父级')
        })
        son.addEventListener('click',function(e){
            console.log('我是子级')
            e.stopImmediatePropagation()
            console.log('调用')
        })
        son.addEventListener('click',function(e){
            console.log('我是子级2')
            e.stopImmediatePropagation()
            console.log('调用2')
        })
    </script>
</body>
</html>

点击son执行结果
在这里插入图片描述
下面的那个
我是子级2
调用2
并没有执行
点击father

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <script>
        var father=document.querySelector('.father')
        var son=document.querySelector('.son')
        father.addEventListener('click',function(){
            console.log('我是父级')
        },{capture:false})
        son.addEventListener('click',function(e){
            console.log('我是子级')
            console.log('调用')
        },{capture:false})
        son.addEventListener('click',function(e){
            console.log('我是子级2')
            console.log('调用2')
        },{capture:false})
    </script>
</body>
</html>

在这里插入图片描述

　1、stopImmediatePropagation方法：

　　　　stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行

　　2、stopPropagation方法

　　　　stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序

　　

　　区别：

　　　　从概念上讲，在调用完stopPropagation函数之后，就会立即停止对后续节点的访问，但是会执行完绑定到当前节点上的所有事件处理程序；而调用stopImmediatePropagation函数之后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执行了

下面我们看捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <script>
        var father=document.querySelector('.father')
        var son=document.querySelector('.son')
        father.addEventListener('click',function(e){
            console.log('我是父级')
        },{capture:true})
        son.addEventListener('click',function(e){
            console.log('我是子级')
            console.log('调用')
        },{capture:true})
        son.addEventListener('click',function(e){
            console.log('我是子级2')
            console.log('调用2')
        },{capture:true})
    </script>
</body>
</html>