当前位置：首页 > 资讯 > 技术文档

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

时间：2020-08-14 08:27 编辑：来源：阅读：
扫一扫，手机访问

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

[b]javascript 中事件冒泡和事件捕获机制的详解[/b] [b]二者作用：[/b]描述事件触发时序问题 [b]事件捕获[/b]：从document到触发事件的那个节点，即自上而下的去触发事件---由外到内 [b]事件冒泡：[/b]自下而上的去触发事件---由内到外绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获 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 中事件冒泡和事件捕获机制的详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

全部评论(0)

上一篇：深入理解javascript作用域第二篇之词法作用域和动态作用域
下一篇：深入浅析javascript中的作用域(推荐)

资讯排行榜
更多>>