事件冒泡和事件捕获

最新推荐文章于 2024-03-17 22:23:15 发布

luoping1998

最新推荐文章于 2024-03-17 22:23:15 发布

阅读量375

点赞数

分类专栏： Javascript 文章标签：冒泡和捕获 javascript 事件

本文链接：https://blog.youkuaiyun.com/Beng_shakalaka/article/details/78312022

版权

Javascript 专栏收录该内容

14 篇文章

订阅专栏

事件冒泡：

IE的事件流叫做事件冒泡，即从事件开始的最具体的元素接收，然后逐层往上传播到较不具体的节点。比如：

<body>
    <div id="grandfather">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
</body>

这里写图片描述
三个div的关系：son->father->grandfather，当你点击son的时候，点击事件会逐层往上冒泡知道document(或者window)，如图：

事件捕获：

事件捕获恰好和事件冒泡相反，从最不具体的元素向下“捕捉”，直到目标元素。事件捕获的意义在于在事件到达预定目标之前捕获它，以上面那个例子为例，document会最先获得click事件，然后沿着DOM树向下，一直传播到事件的实际目标son

这里写图片描述

DOM事件流：

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段->处于目标阶段->事件冒泡阶段，举个例子：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
    window.onload=function(){
        var oSon=document.getElementById("son");
        var oGrandFather=document.getElementById("grandfather");
        var oFather=document.getElementById("father");
        function showBubble(){
            console.log("bubble:"+this.id);
        }
        function showCapture(){
            console.log("capture:"+this.id);
        }
        oSon.addEventListener("click",showCapture,true);
        oFather.addEventListener("click",showCapture,true);
        oGrandFather.addEventListener("click",showCapture,true);
        oSon.addEventListener("click",showBubble,false);
        oFather.addEventListener("click",showBubble,false);
        oGrandFather.addEventListener("click",showBubble,false);
    }
    </script>
    <style type="text/css">
    #grandfather{
        width: 100%;
        height: 400px;
        background-color:lightblue;
    }
    #grandfather #father{
        width:80%;
        height: 80%;
        margin: 10% auto;
        background-color:lightyellow;
    }
    #father #son{
        width:80%;
        height: 80%;
        margin: 10% auto;
        background-color:white;
    }
    </style>
</head>
<body>
    <div id="grandfather">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
</body>
</html>

当我们点击son的时候，控制台输出如下：
这里写图片描述
这里要注意的是，addEventListener(evName,fn,true/false),第三个参数是否表示将事件绑定到捕获阶段，如果为true则绑定到事件捕获阶段，如果为false则绑定到事件冒泡阶段。我们给每个元素都绑定了在捕获阶段和冒泡阶段会被触发的事件，当我们点击son元素的时候，根据DOM2的事件流，捕获－＞目标－＞冒泡，即事件流会从ｄｏｃｕｍｅｎｔ开始向下捕获，在向下的过程中，如果元素绑定了在捕获阶段要执行的事件，则执行该事件，否则就继续向下直到到达目标元素（这里就是ｓｏｎ），执行目标元素绑定的事件，然后进入冒泡阶段，向上逐层冒泡，如果元素有绑定在冒泡阶段的事件则执行，否则继续向上，直到ｗｉｎｄｏｗ【这里的目标元素为son(触发事件的目标元素，在这里就是我点击的元素)，目标元素的事件触发事件只和事件绑定语句的先后有关，和添加到哪个阶段无关，比如，我们将oSon的绑定事件语句改成如下】：

<script type="text/javascript">
    window.onload=function(){
        var oSon=document.getElementById("son");
        var oGrandFather=document.getElementById("grandfather");
        var oFather=document.getElementById("father");
        function showBubble(){
            console.log("bubble:"+this.id);
        }
        function showCapture(){
            console.log("capture:"+this.id);
        }
        oSon.addEventListener("click",showBubble,false);
        oSon.addEventListener("click",showCapture,true);
        oFather.addEventListener("click",showCapture,true);
        oGrandFather.addEventListener("click",showCapture,true);

        oFather.addEventListener("click",showBubble,false);
        oGrandFather.addEventListener("click",showBubble,false);
    }
    </script>