JS事件冒泡停止冒泡addEventListener--实例演示
Posted 笠航
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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？先后顺序是什么？
该问题的答案取决于浏览器的对事件处理的机制。对于下图的结构，当两个element都绑定了onclick方法时，执行的顺序是什么？
----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | | | -----------------------------------
- Netscape主张元素1的事件首先发生，这种事件发生顺序被称为捕获型
- 微软则保持元素2具有优先权，这种事件顺序被称为冒泡型
- DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。
冒泡型：
1.对于某个节点，触发的一个事件， 会首先执行当前这个dom节点绑定的方法
2.执行完毕后，会冒泡至改节点的父节点，执行相应的函数
3. 重复以上过程，直至Dom的根节点。
对于上文中的例子， 单击#core,
1.首先触发alert(\'core\')
2.然后冒泡至#inner节点，触发alert(\'inner\')
3.最后冒泡至#outer节点，触发alter(\'outer\')
假设对于#inner,我们未为onclick事件指定方法，那么在第二步，不会有方法执行，但是click的事件，仍会继续冒泡至最外层的#outer.
捕获型
事件捕获的顺序刚好与之相反
1.当一个事件发生时，最外层的已绑定该事件的方法会执行
2.然后该事件会下降至他的子节点，触发相应的方法
3.重复1,2的过程
如何加入一个捕获型/冒泡型事件
- 参照上文给出的例子，我们直接在html中绑定事件方法， 这个事件就是冒泡型事件
<div class=\'item\' id=\'outer\' onclick="alert(\'outer\')">
- 当采用原生javascript（非Jquery）方法， 我们使用addEventListener绑定事件 当第三个参数是false的时候， 这个事件就是冒泡型事件(第三个参数的默认值是false).以下两种写法等价。
core.addEventListener("click",function(){alert(\'dddddd\')},false);
core.addEventListener("click",function(){alert(\'dddddd\')});
- 我们使用addEventListener绑定事件 当第三个参数是true的时候， 这个事件就是捕获型事件
core.addEventListener("click",function(){alert(\'dddddd\')},true);
- addEventListe //IE方法，兼容代码前面写过了
stopPropagation()是停止冒泡事件流。
当我们为一个事件绑定的方法中，添加一句stopPropagation,那么该事件的冒泡过程到此为止，其后的所有节点绑定事件都不执行；
没有方法去停止捕获事件流，当然，从功能上看也即没必要，也不合理。
<div class = \'item\'id = \'outer\'>
<div class = \'item\'id = \'core\' > core !! !!!</div>
</div>
<script type = \'text/javascript\'>
var core = document.getElementById(\'core\');
var outer = document.getElementById(\'outer\');
//addEventListener冒泡
core.addEventListener("click",
function(e) {
alert(\'dd\');
e.stopPropagation(); //阻止事件冒泡
},
false);
core.addEventListener("click",
function(e) {
alert(\'dd\');
e.stopPropagation(); //阻止事件冒泡
},
false);
//onclick冒泡 core.onclick = function(e) { alert(\'core\'); e.stopPropagation(); //阻止事件冒泡 }; outer.onclick = function(e) { alert(\'outer\') }; </script>
下面是代码，保存成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；
转自：https://www.cnblogs.com/McQueen1987/p/3950547.html
以上是关于JS事件冒泡停止冒泡addEventListener--实例演示的主要内容，如果未能解决你的问题，请参考以下文章
js中addEventListener第三个参数涉及到的事件捕获与冒泡