JS事件处理：捕获、目标与冒泡阶段解析-优快云博客

本文链接：https://blog.youkuaiyun.com/RoddyLD/article/details/117405280

本文详细介绍了JavaScript中事件的三个阶段：捕获、目标及冒泡，通过实例展示了如何在不同阶段触发事件，并探讨了阻止冒泡行为以及阻止事件冒泡和默认行为的方法，包括`event.stopPropagation()`和`event.preventDefault()`的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS事件的三个阶段详解

一、JS事件的三个阶段
二、冒泡阶段触发事件
三、捕获阶段触发事件
四、阻止冒泡行为
五、阻止事件冒泡和默认行为

一、JS事件的三个阶段

事件处理机制的三个阶段：1.捕获 2.目标 3.冒泡

element.addEventListener(event, function, useCapture)
useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段
捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行

在这里插入图片描述
当点击目标元素的时候就是这三步，唯一的区别是你控制事件触发在哪个阶段。

所以我们可以看到要想截获事件必须要在目标元素事件发生之前，也就是捕获阶段。

二、冒泡阶段触发事件

<style>
    #father {
        height: 200px;
        width: 200px;
        background-color: red;
    }

    #son {
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
<script>
    document.getElementById('father').addEventListener('click', function (e) {
        console.log('这是father')
    }, false)
    document.getElementById('son').addEventListener('click', function (e) {
        console.log('这是son')
    }, false)
</script>

点击绿色区域时
冒泡阶段：事件从内向外执行
在这里插入图片描述

三、捕获阶段触发事件

<style>
    #father {
        height: 200px;
        width: 200px;
        background-color: red;
    }

    #son {
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
<script>
    document.getElementById('father').addEventListener('click', function (e) {
        console.log('这是father')
    }, true)
    document.getElementById('son').addEventListener('click', function (e) {
        console.log('这是son')
    }, true)
</script>

点击绿色区域时
捕获阶段：事件从外向内执行
在这里插入图片描述

四、阻止冒泡行为

<style>
    #father {
        height: 200px;
        width: 200px;
        background-color: red;
    }

    #son {
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
<script>
    document.getElementById('father').addEventListener('click', function (e) {
        console.log('这是father')
        
    }, false)
    document.getElementById('son').addEventListener('click', function (e) {
        console.log('这是son')
        e.stopPropagation()
    }, false)
</script>

点击绿色区域时
此时只会打印本身id为son的div，不会打印父级fathe的rdiv
在这里插入图片描述

五、阻止事件冒泡和默认行为

阻止事件的冒泡方法
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

window.event?window.event.cancelBubble=true:e.stopPropagation();

阻止默认事件的方法
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

window.event?window.event.returnValue=false:e.preventDefault();

即能阻止事件冒泡也能阻止默认事件

javascript的return false只会阻止默认行为，而用jQuery的话则既阻止默认行为又防止对象冒泡。