js事件流传播

这里主要按照主流的浏览器，IE8及以前的浏览器以下的说法并不完全正确，因为IE8及以前的浏览器只支持事件冒泡，没有事件捕获的概念，而且绑定函数也不相同。抛开浏览器的兼容性来看标准，可以让我们更简单的了解一些知识。然后再来看各个浏览器的差异。

两个概念

我们先抛出两个概念：

• 事件流的走向

+ DOM对象的addEventListener函数

addEventListener是DOM2级事件上的方法。主要是给元素绑定处理函数。addEventListener传入三个参数，第一个是字符串类型，表示事件类型；第二个传入一个函数，就是绑定的处理函数，第三个传入一个布尔值，这个布尔值为true的时候，表示是在捕获阶段执行处理函数；为false的时候表示在冒泡阶段执行处理函数。这里处理函数会默认传入一个参数，这个参数是一个event对象，表示此次事件的一些信息，这个对象暂时不做介绍。

  <div id="btn-div">
    <button id="btn">btn</button>
  </div>
  <script>
    window.onload = function() {
      document.getElementById('btn').addEventListener('click',function(e) {
        console.log('目标');
      },false);
      document.getElementById('btn-div').addEventListener('click',function(e) {
        console.log(e);
        console.log('btn-div 捕获')
      },true);
      document.getElementById('btn-div').addEventListener('click',function(e) {
        console.log(e);
        console.log('btn-div 冒泡')
      },false);
    }
  </script>

• 
  
• event对象的stopPropagation
  

这个函数是用来阻止事件传播的。所谓传播就是事件捕获和冒泡。

 document.getElementById('btn').addEventListener('click',function(e) {
   e.stopPropagation();
   console.log('目标');
 },false);

思考

我们在平时开发的过程当中，由于事件冒泡和事件捕获常常会出来和预期不一样的执行结果。很多时候我们需要手动停止事件的传播。从上面的流程图和两个函数中我们可以知道以下两点：

1. 想要阻止事件往下层传播，我们需要在事件捕获阶段就截获事件流，调用stopPropagation方法来阻止事件的捕获传播。
2. 想要阻止事件往上传播，我们就需要在事件冒泡阶段截获事件流，调用stopPropagation方法来阻止事件的冒泡传播。

一般情况下，我们可能会想要阻止冒泡事件，比如说上面的代码，你点击了button按钮，但是也顺带的触发了父级div的click事件，这个就不是我们想要的了。