js事件流机制

最新推荐文章于 2024-03-11 21:23:53 发布

小清新fighting

最新推荐文章于 2024-03-11 21:23:53 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js事件流机制

本文链接：https://blog.youkuaiyun.com/liangjun525/article/details/50515838

js 专栏收录该内容

3 篇文章

订阅专栏

点击窗体中的div是如何实现的，通过一段代码测试了一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function(){
                var d1 = document.getElementById("d1");
                var d2 = document.getElementById("d2");
                document.addEventListener("click",function(){alert("点击body")},true);//true在捕获阶段响应，false在目标阶段响应
                d1.addEventListener("click",function(){alert("点击black")},true);
                d2.addEventListener("click",function(){alert("点击white")},true);
            }
        </script>
    </head>
    <body>
        <div id="d1"style="background:black; width:600px;height:400px;">
            <div id="d2" style="position: absolute;background:white;left:150px;top:60px;width:300px;height:300px;"></div>
        </div>
    </body>

这里写图片描述
document.addEventListener(“click”,function(){alert(“点击body”)},true);//true在捕获阶段响应，false在目标阶段响应，本程序中我设置的为true，所以在捕获阶段响应。

所以本例中我点击白色的div,依次弹出alert(“点击body”),alert(“点击black”),alert(“点击white”)(在捕获阶段响应)
如果我换成false,我点击白色的div,依次弹出alert(“点击white”),alert(“点击black”),alert(“点击body”)(在响应阶段响应)