javascript 事件冒泡和事件捕获

来源：互联网发布：淘宝评论不见了编辑：程序博客网时间：2024/05/16 15:30

事件定义：javascript和html之间的交互是通过事件实现的，事件就是浏览器窗口和文档发生的一些特定的交互的瞬间

一事件流

事件冒泡 : IE 的事件流。事件开始是由具体的元素接受，然后逐级向上传播

事件捕获：Netscape 提出的为事件捕获。事件开始由不太具体的节点接收，而最具体的节点应该最后接收到事件。用意在于事件到达预定目标之前捕获它

DOM事件流：包含三个阶段事件捕获、处于目标阶段、事件冒泡。注：目标对象事件会在冒泡阶段触发。但是 ie9，Safari，chrome 会在捕获阶段触发目标对象事件。所以他们有两个机会在目标对象上面操作事件

如下面demo可以演示事件的执行原理

<!doctype html><html><head>    <meta charset="utf-8"/>    <style>        body{            height: 500px;            width: 500px;        }        #div1{            height: 200px;            width: 300px;            background-color: red;        }        #div2{            background-color: #008000;            height: 50px;            width: 50px;        }    </style></head><body>    <div id="div1">        click div1        <div id="div2">click div2</div>    </div><script>    var div1=document.getElementById("div1"),div2=document.getElementById("div2");    div1.addEventListener("click",some1,false);    div2.addEventListener("click",some2,false);    document.body.addEventListener("click",some,true);    function some1(){        alert("div1");    }    function some2(e){        alert("div2");        //e.stopPropagation();  //阻止冒泡    }    function some(e){        //return false;   //阻止捕获        alert("body");            }</script></body></html>

addEventListener 最后一个参数为true时，表示事件触发在捕获阶段，如果为false目标事件触发在冒泡阶段
点击div2看到结果为 body->div2->div1。这是目标元素在冒泡之前检查其父级元素是否有捕获触发事件，检查到body有捕获阶段的触发事件，就先执行body.然后冒泡执行目标元素和div1
打开some2中的注释，点击div2看到结果为 body->div2. 因为阻止了向上冒泡，所以div1的click事件未触发
打开some中注释，看到执行结果为 div2。阻止了目标元素的冒泡和其父级元素的捕获执行。
有兴趣的同学可以变换addEventListener最后一个参数，执行来看event的冒泡和捕获的执行原理

0 0