一、EventTarget 接口
事件是程序各个组成部分之间的一种通信方式，DOM 节点的事件操作（监听和触发），都定义在EventTarget接口
addEventListener()：绑定事件的监听函数
removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件
useCapture：布尔值，如果设为true，表示监听函数将在捕获阶段（capture）触发（参见后文《事件的传播》部分）。该参数可选，默认值为false（监听函数只在冒泡阶段被触发）。
二、事件的传播
1:捕获阶段(capture phase)
2:目标阶段(target phase)
3:冒泡阶段(bubbling phase)
<div>
<p>click</p>
</div>
<script>
var phases = {
1: 'capture',
2: 'target',
3: 'bubble'
};
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, true);
p.addEventListener('click', callback, false);
function callback(event) {
var tag = event.currentTarget.tagName;
var phase = phases[event.eventPhase];
console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'. event.eventPhase:"+event.eventPhase);
}
</script>
Tag: 'DIV'. EventPhase: 'capture'. event.eventPhase:1
Tag: 'P'. EventPhase: 'target'. event.eventPhase:2
Tag: 'DIV'. EventPhase: 'bubble'. event.eventPhase:3
三、事件的代理
事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click', function (event) {
event.stopPropagation();
// event.stopImmediatePropagation();//彻底取消该事件,不再触发后面所有click的监听函数
}, true);
四、Event 对象
event = new Event(type, options);
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡
var ev = new Event(
'look',
{
'bubbles': true,
'cancelable': false
}
);
var click = new Event('click');
p.dispatchEvent(click);
Event.target:原始触发节点
Event.currentTarget:当前正在通过的节点, 等同于监听函数内部的this
Event.type:返回一个字符串，表示事件类型
Event.preventDefault
方法取消浏览器对当前事件的默认行为
举例，在以下情况下有用：
- 单击“提交”按钮，阻止其提交表单
- 单击链接，防止链接跟随 URL
passive:true 可以不检测preventDefault
event.stopPropagation()：
方法阻止事件在 DOM 中继续传播
