JS中的事件传播机制

一、事件的传播

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

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

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

二、代码演示

<!--<div>节点之中有一个<p>节点。-->
<div>
  <p>点击</p>
</div>

/**
   * 如果对这两个节点，都设置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 + "'");
  }
  
// 点击以后的结果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'

1、结果分析

上面代码表示，click事件被触发了四次： div节点的捕获阶段和冒泡阶段各1次，p节点的目标阶段触发了2次。

1. 捕获阶段：事件从div向p传播时，触发div的click事件；
2. 目标阶段：事件从div到达p时，触发p的click事件；
3. 冒泡阶段：事件从p传回div时，再次触发div的click事件。

其中，p节点有两个监听函数（addEventListener方法第三个参数的不同，会导致绑定两个监听函数），因此它们都会因为click事件触发一次。所以，p会在target阶段有两次输出。

事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。
也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p
在冒泡阶段依次为p、div、body、html、document、window

2、addEventListener()

addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。

target.addEventListener(type, listener[, useCapture]);

该方法接受三个参数。

type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（监听函数只在冒泡阶段被触发）。该参数可选。

3、event.eventPhase

event.eventPhase属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。

event.eventPhase的返回值有四种可能。

0 ：事件目前没有发生。
1 ：事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。
2 ：事件到达目标节点，即event.target属性指向的那个节点。
3 ：事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。

4、event.currentTarget与event.target

事件发生以后，会经过捕获和冒泡两个阶段，依次通过多个 DOM 节点。因此，任意时点都有两个与事件相关的节点，一个是事件的原始触发节点（event.target），另一个是事件当前正在通过的节点（event.currentTarget）。前者通常是后者的后代节点。

event.currentTarget属性返回事件当前所在的节点，即事件当前正在通过的节点，也就是当前正在执行的监听函数所在的那个节点。随着事件的传播，这个属性的值会变。

event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。这个属性不会随着事件的传播而改变。

事件传播过程中，不同节点的监听函数内部的event.target与event.currentTarget属性的值是不一样的。

// HTML 代码为
// <p id="para">Hello <em>World</em></p>
function hide(e) {
    
    
  // 不管点击 Hello 或 World，总是返回 true
  console.log(this === e.currentTarget);

  // 点击 Hello，返回 true
  // 点击 World，返回 false
  console.log(this === e.target);
}

document.getElementById('para').addEventListener('click', hide, false);

上面代码中，em是p的子节点，点击em或者点击p，都会导致监听函数执行。这时，e.target总是指向原始点击位置的那个节点，而e.currentTarget指向事件传播过程中正在经过的那个节点。

由于监听函数只有事件经过时才会触发，所以e.currentTarget总是等同于监听函数内部的this。this指向事件处理器注册的元素！

三、参考资料

https://wangdoc.com/javascript/events/model.html
https://wangdoc.com/javascript/events/event.html#navbar
https://wangdoc.com/javascript/events/eventtarget.html#navbar