标签：style blog http color io 使用 java strong ar
问题：
<div class=‘item‘ id=‘outer‘ onclick="alert(‘outer‘)">
<div class=‘item‘ id=‘inner‘ onclick="alert(‘inner‘);">
<div class=‘item‘ id=‘core‘ onclick="alert(‘core‘)">
core!!!!!
</div>
</div>
</div>
1.上面div中，如果单击core，会执行多少个alert？先后顺序是上面？
冒泡就是处理DOM节点树中，各个节点绑定事件执行流程的一种方式；
因为各浏览器软件和相关组织间的差异，事件流有三种：事件冒泡、事件捕获、DOM事件流，其中DOM事件流已被所有主要浏览器实现；
2.chorme用的是冒泡事件流方式，这个例子解释了冒泡事件流的事件执行顺序；
3. stopPropagation()是停止冒泡事件流。如果你在node A节点添加该方法，那么“泡泡“就在node A这个位置破了，其后的所有节点绑定事件都不执行；
3.同时使用了addEventListener，向某节点添加事件；
4.下面是代码，保存成html文件，看看效果；
<html> <head> <style type="text/css"> .item{ display: table; margin: 100px; } #outer{ width:400px; height:400px; background-color: blue; } #inner{ vertical-align: middle; width:200px; height:200px; background-color: white; } #core{ width:80px; height:80px; background-color: red; text-indent: 10px; line-height: 50px; } </style> </head> <body> <div class=‘item‘ id=‘outer‘ onclick="alert(‘outer‘)"> <div class=‘item‘ id=‘inner‘ onclick="alert(‘inner‘);stopbubble(arguments[0])"> <div class=‘item‘ id=‘core‘ onclick="alert(‘core‘)"> core!!!!! </div> </div> </div> </body> <!--you must write <script> under <body>--> <script type=‘text/javascript‘> var core = document.getElementById(‘core‘); core.addEventListener("click",function(){alert(‘dddddd‘)},false); //addEventListener: can add one more event to node "core" function stopbubble(e){ e.stopPropagation();//stop bubble event on this node } </script> </html>
前端效果：
点击core！！！后：
1.先alert core 因为绑定了dddd，然后会alert dddd；
2.然后冒泡到inner节点后，alert inner，但是同时执行stopbubble(arguments[0])来停止冒泡；
3.停止冒泡后，该node后续节点就不执行了，所以不会alert outer；
JS事件冒泡、停止冒泡、addEventListener--实例演示
标签：style blog http color io 使用 java strong ar
原文地址：http://www.cnblogs.com/McQueen1987/p/3950547.html
