JS的事件冒泡和事件捕获

最新推荐文章于 2025-04-19 12:49:59 发布

忘川茶社

最新推荐文章于 2025-04-19 12:49:59 发布

阅读量175

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44538225/article/details/86537032

JS的事件冒泡和事件捕获
那么什么是事件冒泡和事件捕获呢？在这里给大家分享一下我的理解
1、事件冒泡，从子元素到父元素依次触发其上事件的处理方式叫事件冒泡，通俗点说呢就是家里煮开水时水泡从底往上冒。举个例子：比如有个

下面再嵌套一个

标签。

<div id=”first”>father
      <div id =”second”>son</div>
</div>

function father() {                                
         console.log("hello：world"); 
} 
function son() {     
         console.log("hi：everyone  ");  
         }

这时我们点击最外层的first时，当然会触发father函数，然而当我们点击second
时，也会触发father函数.当然，这得绑定监听事件。

那么事件捕获呢
2、事件捕获
事件捕获与事件冒泡完全相反，先触发父级元素的事件，然后再逐级触发子元素的事件，就是比如说你要进你的卧室，那肯定得先进你家大门口的门才进得了你卧室的门，所以这是事件捕获，得一层一层的往下。但如果想要发生事件捕获事件的话，就要给个参数，否则默认事件冒泡事件。
更详细的理解如下：下面是用VS写的代码，这来源授课老师授课时的讲解

@{
    Layout = null;
}

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript事件捕获和冒泡过程演示</title>
    <style type="text/css">
        .box1 {
            border: green 40px solid;
            width: 300px;
            height: 300px;
            margin: auto;
        }

        .box2 {
            border: yellow 40px solid;
            width: 220px;
            height: 220px;
            margin: auto;
        }

        span {
            position: relative;
            left: 50px;
            top: 50px;
            background-color: rgba(128, 128, 128, 0.22);
        }
    </style>
</head>

<body id="body">
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <span id="span">span.</span>
        </div>
    </div>

    <script type="text/javascript">
        var varDocument = document.documentElement;
        var varBody = document.getElementById("body");
        var varBox1 = document.getElementById("box1");
        var varBox2 = document.getElementById("box2");
        var varSpan = document.getElementById("span");

        //捕获过程
        window.addEventListener("click", funBuHuo, true);
        varDocument.addEventListener("click", funBuHuo, true);
        varBody.addEventListener("click", funBuHuo, true);
        varBox1.addEventListener("click", funBuHuo, true);
        varBox2.addEventListener("click", funBuHuo, true);
        varSpan.addEventListener("click", funBuHuo, true);
        //冒泡过程
        window.addEventListener("click", funMaoPao, false);
        varDocument.addEventListener("click", funMaoPao, false);
        varBody.addEventListener("click", funMaoPao, false);
        varBox1.addEventListener("click", funMaoPao, false);
        varBox2.addEventListener("click", funMaoPao, false);
        varSpan.addEventListener("click", funMaoPao, false);

        function funBuHuo(event) {
            console.log("捕获过程--->时间：" + new Date(event.timeStamp) +
                " 产生事件的节点id：" + event.target.id +
                "  当前节点id：" + event.currentTarget.id +
                " 当前节点:" + event.currentTarget.tagName);
        }

        function funMaoPao(event) {
            console.log("冒泡过程--->时间：" + new Date(event.timeStamp) +
                    " 产生事件的节点id：" + event.target.id +
                    "  当前节点id：" + event.currentTarget.id+
                " 当前节点:" + event.currentTarget.tagName);
        }
    </script>
</body>
</html>

效果：
图1，当鼠标移入最里面那个div然后点击鼠标，控制台输出如图所示：

捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：undefined 当前节点:undefined
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id： 当前节点:HTML
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：body 当前节点:BODY
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box1 当前节点:DIV
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box2 当前节点:DIV
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box2 当前节点:DIV
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box1 当前节点:DIV
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：body 当前节点:BODY
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id： 当前节点:HTML
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：undefined 当前节点:undefined

图2，当鼠标移出到最外面那个div然后点击鼠标，控制台输出如图所示：

捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：undefined 当前节点:undefined
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id： 当前节点:HTML
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：body 当前节点:BODY
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box1 当前节点:DIV
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box2 当前节点:DIV
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box2 当前节点:DIV
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：box1 当前节点:DIV
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：body 当前节点:BODY
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id： 当前节点:HTML
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点id：box2  当前节点id：undefined 当前节点:undefined
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:01:21 GMT+0800 (中国标准时间) 产生事件的节点id：body  当前节点id：undefined 当前节点:undefined
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:01:21 GMT+0800 (中国标准时间) 产生事件的节点id：body  当前节点id： 当前节点:HTML
JavascriptEventsProcessDemo:66 捕获过程--->时间：Thu Jan 01 1970 08:01:21 GMT+0800 (中国标准时间) 产生事件的节点id：body  当前节点id：body 当前节点:BODY
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:01:21 GMT+0800 (中国标准时间) 产生事件的节点id：body  当前节点id：body 当前节点:BODY
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:01:21 GMT+0800 (中国标准时间) 产生事件的节点id：body  当前节点id： 当前节点:HTML
JavascriptEventsProcessDemo:73 冒泡过程--->时间：Thu Jan 01 1970 08:01:21 GMT+0800 (中国标准时间) 产生事件的节点id：body  当前节点id：undefined 当前节点:undefined