文章简介
本篇文章为【JavaScript 漫游】专栏的第 022 篇文章，记录了 JavaScript 中 Event 对象的相关知识点。
Event 对象概述
事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个 Event 对象，所有的事件都是这个对象的实例，或者说继承了 Event.prototype 对象。
Event 对象本身就是一个构造函数，可以用来生成新的实例。
event = new Event(type, options);
Event 构造函数接受两个参数。第一个参数 type 是字符串，表示事件的名称；第二个参数 options 是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
bubbles：事件对象是否冒泡，默认为falsecancelable：事件是否可以被取消，即能否用event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为
var ev = new Event(
'look',
{
'bubbles': true,
'cancelable': false
}
);
document.dispatchEvent(ev);
Event.bubbles 和 Event.eventPhase
前者返回一个布尔值，表示当前事件是否会冒泡，只读，默认为 false。后者返回一个整数常量，表示事件目前所处的阶段，只读。
var phase = event.eventPhase;
四种可能值。
- 0：没有发生
- 1：捕获阶段
- 2：目标阶段
- 3：冒泡阶段
Event.cancelable、Event.cancelBubble 和 Event.defaultPrevented
Event.cancelable 返回一个布尔值，表示事件是否可以取消。该属性为只读属性，一般用来了解 Event 实例的特性。当值为 true 时，调用 Event.preventDefault() 就可以取消这个事件，阻止浏览器对该事件的默认行为。
Event.cancelBubble 是一个布尔值，如果设为 true，相当于执行 Event.stopPropagation() ，可以阻止事件的传播。
Event.defaultPrevented 返回一个布尔值，表示该事件是否调用过 Event.preventDefault()，只读。
Event.currentTarget 和 Event.target
事件发生以后，会经过捕获和冒泡两个阶段，依次通过多个 DOM 节点。因此，任意时点都有两个与事件相关的节点，一个是事件的原始触发节点（Event.target），另一个是事件当前正在通过的节点（Event.currentTarget）。前者通常是后者的后代节点。
Event.currentTarget 返回事件当前所在的节点，即事件当前正在通过的节点，也就是当前正在执行的监听函数所在的那个节点。随着事件的传播，这个属性的值会变。
Event.target 返回原始触发事件的那个节点，即事件最初发生的节点。这个属性不会随着事件的传播而改变。
Event.type
返回一个字符串，表示事件类型。事件的类型是在生成事件的时候指定的。该属性只读。
var evt = new Event('foo');
evt.type // "foo"
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;
Event.preventDefault()
取消浏览器对当前事件的默认行为。该方法生效的前提是，事件对象的cancelable 属性为 true，如果为 false，调用该方法没有任何效果。
Event.stopPropagation()
阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
function stopEvent(e) {
e.stopPropagation();
}
el.addEventListener('click', stopEvent, false);
Event.stopImmediatePropagation()
阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比 Event.stopPropgation() 更彻底。
如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了 Event.stopImmediatePropagation 方法，其他的监听函数就不会再执行了。
function l1(e){
e.stopImmediatePropagation();
}
function l2(e){
console.log('hello world');
}
el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);
