js事件冒泡和捕获

一、什么是事件冒泡和捕获

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

• 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
• 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
• 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

  
点击

上面代码中，

节点之中有一个

节点。
如果对这两个节点，都设置click事件的监听函数（每个节点的捕获阶段和监听阶段，各设置一个监听函数），共计设置四个监听函数。然后，对

点击，click事件会触发四次。

var phases = {
  1: 'capture',
  2: 'target',
  3: 'bubble'
};

var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);

function callback(event) {
  var tag = event.currentTarget.tagName;
  var phase = phases[event.eventPhase];
  console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}

// 
节点有两个监听函数，两个函数的第三个参数不同，它们都会因为click事件触发一次
// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'

事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p，在冒泡阶段依次为p、div、body、html、document、window。
二、事件的代理
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

上面代码中，click事件的监听函数定义在

节点，但是实际上，它处理的是子节点
• 的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个
• 节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。
  三、关于使用addEventListener与直接使用onclick等绑定事件

  
       
  里层
  
  

  function callback1(){
          console.log(10)
      }
  function callback2(){
          console.log(20)
      }
  

  这时候点击里层，会先输出20，然后输出10；

  function callback1(){
          console.log(10)
      }
  function callback2(event){
          event = event || window.event;
          event.stopPropagation();
          console.log(20)
      }
  

  把冒泡禁止的话控制台只会输出10；因此禁止冒泡可以消除一些场景下事件对外层元素的影响。

  关于addEventListener与直接绑定事件的区别:

  addEventListener可以指定是在冒泡还是捕获阶段监听。直接使用onclick或者vue的v-on:click等绑定事件的话，从结果来看外层元素只会受到里层元素事件冒泡的影响。