首页 > 代码库 > JS事件冒泡、停止冒泡、addEventListener--实例演示
JS事件冒泡、停止冒泡、addEventListener--实例演示
问题：
<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--实例演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。