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

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

• 事件绑定

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

  1. 在DOM元素中直接绑定；

  <div onclick="handleCLick()"></div>
  

  2. 在JavaScript代码中通过dom元素的属性绑定；

  <div id="btn"></div>
  <script>
      var thisBtn = document.getElementById('btn')
      thisBtn.onclick = function() {
          console.log('this is div#btn click')
      }
  </script>
  

  3. 绑定事件监听函数

  <div id="btn"></div>
  <script>
      var dom = document.getElementById("btn")
      function handleBtn(){
          console.log('this is div#btn')
      }
  
      <!-- IE下使用attachEvent/detachEvent函数进行事件绑定和取消。不是W3C标准的做法，所以不推荐使用 -->
      /*
          1.事件处理函数中this代表的是window对象，不是dom对象。
          2.同一个事件处理函数只能绑定一次。
      */
      <!-- bind -->
      dom.attachEvent('onclick', handleBtn)
      <!-- unbind -->
      dom.detachEvent('onclick', handleBtn)
      <!-- 使用W3C标准的addEventListener和removeEventListener。不支持IE6/7/8 -->
      <!-- bind -->
      dom.addEventListener('click', handleBtn)
      <!-- unbind -->
      dom.removeEventListener('click', handleBtn)
  </script>
  

• 事件冒泡与捕获

  事件冒泡和捕获是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 情况)，则执行；

  <div id="out">
      <div id="inner">
          <div id="center">center</div>
      </div>
  </div>
  <script>
      var center = document.getElementById('center');
      var inner = document.getElementById('inner');
      var out = document.getElementById('out');
      // center
      center.addEventListener('click', function () {
          console.log('center true')
      }, true)
      center.addEventListener('click', function () {
          console.log('center false')
      }, false)
      // inner
      inner.addEventListener('click', function (event) {
          // event.stopPropagation()
          console.log('inner true')
      }, true)
      inner.addEventListener('click', function () {
          console.log('inner false')
      }, false)
      // out
      out.addEventListener('click', function () {
          console.log('out true')
      }, true)
      out.addEventListener('click', function () {
          console.log('out false')
      }, false)
  </script>
  

  点击中心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()将停止事件的传播。