JS事件冒泡和捕获

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

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

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

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

<div>
  <p>点击</p>
</div>

上面代码中，<div>节点之中有一个<p>节点。
如果对这两个节点，都设置click事件的监听函数（每个节点的捕获阶段和监听阶段，各设置一个监听函数），共计设置四个监听函数。然后，对<p>点击，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 + "'");
}

// <p>节点有两个监听函数，两个函数的第三个参数不同，它们都会因为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事件的监听函数定义在<ul>节点，但是实际上，它处理的是子节点<li>的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个<li>节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。
三、关于使用addEventListener与直接使用onclick等绑定事件

<div class="outside" onclick="callback1()">
     <div class="inside" onclick="callback2()">里层</div>
</div>

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)
    }

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

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

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

JS事件冒泡和捕获

推荐阅读更多精彩内容