1. EventTarget接口事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。
DOM的事件操作（监听和触发），都定义在EventTarget接口.Element节点、document节点和window对象，都部署了这个接口
XMLHttpRequest、AudioNode、AudioContext等浏览器内置对象，也部署了这个接口。
v该接口即三个方法
-
addEventListener：绑定事件的监听函数
target.addEventListener(type, listener[, useCapture]); //type:事件名称，大小写敏感 //listener:句柄 //useCapture:布尔值，捕获阶段为true，默认false -
removeEventListener：移除事件的监听函数
div.removeEventListener('click', listener, false);
removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。 - dispatchEvent：在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。参数是一个Event对象的实例,否则报错
target.dispatchEvent(event) para.addEventListener('click', hello, false); var event = new Event('click'); para.dispatchEvent(event); ／／根据dispatchEvent方法的返回值，判断事件是否被取消了。 var canceled = !cb.dispatchEvent(event); if (canceled) { console.log('事件取消'); } else { console.log('事件未取消'); } }监听函数，DOM提供三种方法，可以用来为事件绑定监听函数。
1. HTML标签的on-属性 ：注意，使用这种方法时，on-属性的值是将会执行的代码，而不是一个函数。
<body onload="doSomething()">
2. Element节点的事件属性 :使用这个方法指定的监听函数，只会在冒泡阶段触发。
window.onload = doSomething; div.onclick = function(event){ console.log('触发事件'); };
3. addEventListener方法
Element节点、document节点、window对象的addEventListener方法，也可以定义事件的监听函数。
4. this指向
addEventListener方法指定的监听函数，内部的this对象总是指向触发事件的那个节点。
`
// 以下写法的this对象都指向Element节点。
// JavaScript代码
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}
// HTML代码
<element onclick="console.log(this.id)">
//以下写法的this对象，都指向全局对象。
// JavaScript代码
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');
// HTML代码
<element onclick="doSomething()">
`
3.1 传播的三个阶段
第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）;第二阶段：在目标节点上触发，称为“目标阶段”（target phase）;第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）
3.2 事件的代理
`
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
//如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。
p.addEventListener('click', function(event) {
event.stopPropagation();
});
`
Event对象本身就是一个构造函数，可以用来生成新的实例。
event = new Event(typeArg, eventInit);//typeArg:string--event name, eventInit:object--config var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);
除了浏览器预定义的那些事件，用户还可以自定义事件，然后手动触发。
`
// 新建事件实例
var event = new Event('build');
// 添加监听函数
elem.addEventListener('build', function (e) { ... }, false);
// 触发事件
elem.dispatchEvent(event);
`
1.CustomEvent()
Event构造函数只能指定事件名，不能在事件上绑定数据。如果需要在触发事件的同时，传入指定的数据，需要使用CustomEvent构造函数生成自定义的事件对象
var event = new CustomEvent('build', { 'detail': 'hello' }); function eventHandler(e) { console.log(e.detail); }
2. 事件的模拟
有时，需要在脚本中模拟触发某种类型的事件，这时就必须使用这种事件的构造函数。
function simulateClick() { var event = new MouseEvent('click', { 'bubbles': true, 'cancelable': true }); var cb = document.getElementById('checkbox'); cb.dispatchEvent(event); }