JS事件冒泡与捕获，以及阻止事件冒泡

2017-10-31

JS事件的冒泡与捕获在平时的开发中时常会遇到，以下用简单的叙述以及案例详细解释冒泡与捕获。同时给出阻止事件冒泡的方法。

平时在写JS时，可能会在父子元素上都增加事件，这样就产生了事件的冒泡与捕获。

冒泡：事件的冒泡简单说，是事件从内向外依次执行

捕获：事件的捕获简单说，是事件从外向内依次执行

在HTML的DOM操作中，为元素增加事件的方法是addEventListener，这个方法的第三个参数是一个Boolean值，当为false时，指定事件在冒泡阶段执行；当为true时，在捕获阶段执行，默认值为false。

以下通过实例简单说明一下（自己也可以仿照一下代码试一下，给一些样式效果会更加明显）：

HTML:

  <div id="parent">
      父元素
      <div id="child">子元素</div>
  </div>

  <script>
      document.getElementById("parent").addEventListener("click", function(){
	alert("我是父元素");
}, false);

      document.getElementById("child").addEventListener("click", function(){
	alert("我是子元素");
}, false);
  </script>

当点击“子元素”时，会依次弹出“我是子元素”、“我是父元素”；如果将两个参数`false`都改为`true`后，点击“子元素”后，会依次弹出“我是父元素”，“我是子元素”。

如果将其中的一个设置为`true`，另一个为`false`，那么将根据父元素设置的值来判断。如果父元素设置为`true`，将在捕获阶段执行，反之，则在冒泡阶段执行。

其实事件的捕获与时间的冒泡并不是很难理解，但是在实际应用中，我们只希望事件发生在目标元素上，这就需要阻止事件的冒泡，以此来达到我们需要的效果。阻止冒泡的方式有以下几种：

原生JS方法

function stopPropagation(e){
    e = e || window.event;
    if(e.stopPropagation){    //W3C阻止冒泡方法
        e.stopPropagation();
    }else{
        e.cancelBubble = true; //IE阻止冒泡方法
    }
}

也可以简写：

function stopPropagation(e){
    e = e || window.event;
    e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}

将此方法放入之前的代码中，并在addEventListener方法中调用，就会阻止事件冒泡。

  <script>
      document.getElementById("parent").addEventListener("click", function(){
	alert("我是父元素");
}, false);

      document.getElementById("child").addEventListener("click", function(e){
	alert("我是子元素");
          stopPropagation(e);
}, false);
  </script>

此时点击“子元素”时，将只弹出“我是子元素”。

jquery方法：

直接在事件内部调用e.stopPropagation()方法，就可以阻止事件冒泡，jquery已经做好了IE兼容性处理，这里就不需要写IE的方法。

虽然jquery用起来比较简单，但是还是应该了解原生JS的使用。在不同的环境下，应用不同的方法，可以使得开发更有效率。