事件冒泡和事件捕获

最新推荐文章于 2025-08-22 09:26:38 发布

初漾

最新推荐文章于 2025-08-22 09:26:38 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏：面试题 JavaScript

本文链接：https://blog.youkuaiyun.com/shuidinaozhongyan/article/details/77832871

面试题同时被 2 个专栏收录

99 篇文章

订阅专栏

JavaScript

70 篇文章

订阅专栏

经过测试，当给目标元素均添加冒泡和捕获时，目标元素的事件触发顺序根据添加冒泡和捕获的顺序，而上级元素事件还是先在捕获阶段触发。
当给根元素均添加冒泡和捕获时，目标元素的事件触发顺序根据添加冒泡和捕获的顺序，而目标元素是在捕获阶段触发。
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            padding: 100px;
            background-color: gray;
        }
        p{
            width: 300px;
            height: 300px;
            background-color: indianred;
        }
        div{
            padding:50px;
            background-color: #67991d;
        }
    </style>
</head>
<body id="body">
<div id="div">
    <p id="p">this is p</p>
</div>
<script type="text/javascript">

    p.addEventListener('click',function () {
        console.log('p冒泡阶段');
    },false);

    p.addEventListener('click',function () {
        console.log('p捕获阶段');
    },true);




    body.addEventListener('click',function () {
        console.log('body冒泡阶段');
    },false);

    body.addEventListener('click',function () {
        console.log('body捕获阶段');
    },true);

    div.addEventListener('click',function () {
        console.log('div冒泡阶段');
    },false);

    div.addEventListener('click',function () {
        console.log('div捕获阶段');
    },true);
</script>
</body>
</html>