事件绑定的原理，冒泡与捕获概念.

要想Javascript对用户的操作做出响应，首先要对DOM元素绑定事件处理函数。所谓处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

• 事件绑定

  在Javascript中，有三种常用的绑定事件的方法：

  1. 在DOM元素中直接绑定；
  2. 在JavaScript代码中通过dom元素的属性绑定；
  3. 绑定事件监听函数

• 事件冒泡与捕获

  事件冒泡和捕获是DOM中事件传播的两种方式，比如说对于注册了相同事件的两个DOM元素，当点击里层DOM元素时候，这两个事件谁先执行。

  冒泡事件： 由里向外，最里层的元素先执行，然后冒泡到外层。

  捕获事件： 由外向里，最外层的元素先执行，然后传递到内部。

  在 IE 9 之前是只支持事件冒泡，IE 9(包括 IE 9) 之后和目前主流的浏览器都同时支持两种事件。只需修改 addEventListener的第三个参数，true 为捕获，false 为冒泡，默认为冒泡。

• addEventListener

  网景 和 微软 曾经的战争还是比较火热的，当时，网景主张捕获方式，微软主张冒泡方式。后来 w3c采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。

  addEventListener有三个参数(第三个参数就是为冒泡和捕获准备的)：

  element.addEventListener(event, function, useCapture)

  第一个参数是需要绑定的事件

  第二个参数是触发事件后要执行的函数

  第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

• 进一步了解冒泡和捕获

  浏览器处理时间分为两个阶段，捕获阶段和冒泡阶段：

  1. 先执行捕获阶段，如果事件是在捕获阶段执行的(true 情况)，则执行；

  2. 然后是冒泡阶段，如果事件是在冒泡阶段执行的(false 情况)，则执行；

  
      
  
          
  center
      
  
  
  

  点击中心center，则输出

  // out     true
  // inner   true
  // center  true
  // center  false
  // inner   false
  // out     false
  

  此时，根据浏览器事件机制先捕获后冒泡。发生center的捕获顺序是document -> html -> body -> out -> inner -> center 就捕获到了center，然后冒泡，冒泡顺序反之。

  在假设点击inner，则输出

  // out      true
  // inner    true
  // inner    false
  // out      false
  

  假设上面代码中的event.stopPropagation()生效执行，点击center时，事件在inner上捕获时停止了事件传播，但是不能阻止该节点上的捕获事件被调用，则输出的是

  // out      true
  // inner    true
  

  event.stopPropagation() 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一Document节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

  总结：

  1. 对于非target节点则先执行捕获在执行冒泡；
  2. 对于target节点，捕获与冒泡事件的执行顺序取决于注册顺序；
  3. 使用event.stopPropagation()将停止事件的传播。