事件冒泡和事件捕获

最新推荐文章于 2022-07-17 13:03:40 发布

初漾

最新推荐文章于 2022-07-17 13:03:40 发布

阅读量236

点赞数

分类专栏：面试题 JavaScript

本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/77832871

版权

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

99 篇文章 7 订阅

订阅专栏

JavaScript

70 篇文章 0 订阅

订阅专栏

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

<!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>

点击p元素时，触发顺序：
body捕获阶段
div捕获阶段
p冒泡阶段
p捕获阶段
div冒泡阶段
body冒泡阶段

参考：http://www.cnblogs.com/wanliyuan/p/5718180.html

初漾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡和事件捕获

经过测试，当给目标元素均添加冒泡和捕获时，目标元素的事件触发顺序根据添加冒泡和捕获的顺序，而上级元素事件还是在捕获阶段触发。当给根元素均添加冒泡和捕获时，目标元素的事件触发顺序根据添加冒泡和捕获的顺序，而目标元素是在捕获阶段触发。参考：http://www.cnblogs.com/wanliyuan/p/5718180.html
复制链接

扫一扫

专栏目录