javascript 中事件冒泡和事件捕获机制的详解

2019-11-19 15:35:10

字体：大中小

来源：转载

供稿：网友

javascript 中事件冒泡和事件捕获机制的详解

二者作用：描述事件触发时序问题

事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件---由外到内

事件冒泡：自下而上的去触发事件---由内到外

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获

true,事件捕获；false,事件冒泡

一般默认false,即事件冒泡

Jquery的e.stopPropagation会阻止冒泡，意思就是到DOM为止，祖先级的事件就不要触发了

下面是我尝试的例子：

 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>事件冒泡与事件捕获</title>   <script>     window.onload = function () {       document.getElementById("parent").addEventListener("click",function(e){         alert("parent事件被触发，"+this.id);       },true)       document.getElementById("child").addEventListener("click",function(e){         alert("child事件被触发，"+this.id)       },true)     }    </script> </head> <body> <div id="parent">   parent事件   　　<div id="child" class="child">   child事件   </div> </div> </body> </html>

例子里我加了第三个true，是事件捕获。

如果不加则是默认的事件冒泡，这时候事件触发时序就是自内向外

以上就是javascript 中事件冒泡和事件捕获机制的详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇：ionic2懒加载配置详解

下一篇：Vue的Class与Style绑定的方法