JavaScript冒泡与捕获

最新推荐文章于 2024-01-28 16:11:51 发布

刘远山

最新推荐文章于 2024-01-28 16:11:51 发布

阅读量151

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/108924296

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中冒泡与捕获事件的工作原理，通过实例展示了如何通过`cancelBubble`和`stopPropagation`控制事件传播，并演示了从底层到顶层（冒泡）和从顶层到底层（捕获）的事件执行顺序。

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

冒泡与捕获

冒泡现象：
自底向上执行事件函数

阻止冒泡：
1，window.event.cancelBubble = true //window.event存在时
2，event.stopPropagation();//window.event不存在时，使用event参数

捕获：和冒泡正好相反，但是捕获事件实际上是浏览器的真正执行顺序。若使用捕获则可在事件监听将第3个参数设为true。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 50px;
            background-color: burlywood;
            border: solid 5px red;
        }
    </style>
</head>
<body>
<div id="divOut">我是最外层的div
    <div id="divMid" >我是中间的
        <div id="divIn">
            我是最里层的
        </div>
    </div>
</div>
<script>
    //先执行最里边的事件，再依次往外执行相应事件，这就是冒泡现象
   /* function clickInDiv()
    {
        alert("正在执行最里边的div点击事件");
        console.log(window.event);
        window.event.cancelBubble = true;
    }*/
   /* function clickMidDiv()
    {
        alert("正在执行中间的div点击事件");
    }*/
   /*var divMid = document.getElementById("divMid");
    divMid.onclick = function (ev){
        alert("正在执行中间的div点击事件");
        event.stopPropagation();
    }*/
    /*function clickOutDiv()
    {
        alert("正在执行最外边的div点击事件");
    }*/
    /*var divOut = document.getElementById("divOut");
    divOut.addEventListener("click", function (ev) {
       alert("正在执行最外边的div点击事件");
       ev?ev.stopPropagation():window.event.cancelBubble = true;
    });*/

    //------------------执行捕获
    var divNodes = document.getElementsByTagName("div");
    for(let i = 0; i < divNodes.length; i++){
        divNodes[i].addEventListener("click", function(){
           alert("你点了"+divNodes[i].id);
        },true);
    }
</script>
</body>
</html>

刘远山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript冒泡与捕获

冒泡与捕获冒泡现象：自底向上执行事件函数阻止冒泡：1，window.event.cancelBubble = true //window.event存在时2，event.stopPropagation();//window.event不存在时，使用event参数捕获：和冒泡正好相反，但是捕获事件实际上是浏览器的真正执行顺序。若使用捕获则可在事件监听将第3个参数设为true。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录