Event 对象

1.概述
事件发生以后，会产生一个事件对象，作为参数传递给监听函数。浏览器原生提供一个 Event 对象，所有的事件都是这个对象的实例，或者说继承了 Event.prototype 对象。
Event 对象本身就是一个构造函数，可以用来生成新的实例。
event = new Event(type, options);

2.实例属性

2.1 Event.bubbles，Event.eventPahse

Event.bubbles 属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性，一般用来了解 Evnet 实例是否可以冒泡。除非显示声明，Event 构造函数生成的事件，默认不是冒泡的。
Event.eventPhase 属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。
var phase = event.eventPhase;

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

• 0，事件目前没有发生。

• 1，事件目前处于捕获阶段，即处于从祖先节点向目标节点传播的过程中。

• 2，事件到达目标节点，即 Event.target 属性指向的那个节点。

• 3、事件处于冒泡阶段，即处于目标节点向祖先节点方向传播过程中。

2.7 Event.detail

Event.detail属性只有浏览器的 UI （用户界面）事件才具有。该属性返回一个数值，表示事件的某种信息。具体含义与事件类型相关。比如，对于click和dblclick事件，Event.detail是鼠标按下的次数（1表示单击，2表示双击，3表示三击）；对于鼠标滚轮事件，Event.detail是滚轮正向滚动的距离，负值就是负向滚动的距离，返回值总是3的倍数。

// HTML 代码如下
// <p>Hello</p>
function giveDetails(e) {
  console.log(e.detail);
}

document.querySelector('p').onclick = giveDetails;


3.实例方法
3.3 Event.stopImmediatePropagation()

Event.stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比Event.stopPropagation()更彻底。

如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了Event.stopImmediatePropagation方法，其他的监听函数就不会再执行了。

3.4 Event.composedPath()

Event.composedPath()返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。

// HTML 代码如下
// <div>
//   <p>Hello</p>
// </div>
var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', function (e) {
  console.log(e.composedPath());
}, false);
// [p, div, body, html, document, Window]

上面代码中，click事件的最底层节点是p，向上依次是div、body、html、document、Window。