事件冒泡和事件捕获

来源：互联网发布：剑侠情缘刷元宝软件编辑：程序博客网时间：2024/05/16 05:47

事件冒泡：

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>

此时，我们再次点击son时，控制台输出如下：
这里写图片描述

阅读全文

0 0