js中事件冒泡和事件捕获

Posted liululu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中事件冒泡和事件捕获相关的知识,希望对你有一定的参考价值。

什么时候存在这种问题?
当一个行为触发了多个对象的事件时。
 
<body>
  <div class="fa">
    <div class="son1">
      <div class="son2"></div>
    </div>
  </div>
  <script type="text/javascript">
    var fa = document.getElementsByClassName(\'fa\')[0];
    var son1 = document.getElementsByClassName(\'son1\')[0];
    var son2 = document.getElementsByClassName(\'son2\')[0];
    fa.addEventListener("click",function(e){console.log(\'fa\');e.stopPropagation();},true);
    son1.addEventListener(\'click\',function(){console.log(\'son1\')},false);
    son2.addEventListener(\'click\',function(){console.log(\'son2\')},true);
  </script>
addEventListener第三个参数不写时默认为false,true代表在事件捕获阶段执行,false代表在事件冒泡阶段执行。
e.stopPropagation()可以让一个行为只执行一个对象的事件。

以上是关于js中事件冒泡和事件捕获的主要内容,如果未能解决你的问题,请参考以下文章