共计 1875 个字符，预计需要花费 5 分钟才能阅读完成。
事件的本质是程序各组成之间的一种通讯方式，也是异步编程的一种实现。—- 摘自 JavaScript 标准参考教程
1.EventTarget 接口
EventTarget 是接收事件监听跟出发的接口。所有的节点对象都会有这个接口。该接口提供三个实例方法。
addEventListener: 绑定监听事件
removeEventListener: 移除监听事件
dispatchEvent：触发事件
1.1 EventTarget.addEventListener()
EventTarget.addEventListener()用于实现为节点或者对象绑定一个监听事件，一个对象或者节点可以绑定多个监听事件，但若每个监听事件的监听函数是同一个的话就只会执行一次，其他函数会自动被移除。
该方法接受三个参数。
target.addEventListener(type,listener[,userCapture]);
type: 事件 (如：click,focus) 的名称，大小写敏感。
listener: 监听函数（函数名）。事件发生时，就会执行此函数。
useCapture: 布尔指，表示监听函数是否在捕获阶段触发，默认值：false（函数只在冒泡时触发）
example 1：
oDiv=document.querySelector(‘.div1’);
function eventFun(){
console.log(‘ 监听事件 ’)
}
oDiv.addEventListener(‘click’,eventFun,false);
关于参数还有另外两个情况 1. 第二个参数除了监听函数，还可以是具有 handleEvent 方法的对象 example 2:
oDiv.addEventListener(‘click’, { handleEvent:function(){console.log(‘handleEvent 方法 ’); } });
2. 第三个参数除了布尔值 useCapture，还可以是一个属性配置对象。该对象有下列属性
capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
once：布尔值，表示监听函数只触发一次，然后自动移除。
passive：布尔值，表示监听函数不会调用事件的 preventDefault 方法。如果监听函数调用了，浏览器会自动忽略这个要求，并在控制台输出一行警告。
1.2 EventTarget.removeEventListener() 该方法主要用于移除 addEventListener 添加的事件监听函数。该方法没有返回值。用法与 addEventListener()方法完全一值。
1.3 EventTarget.dispatchEvent()EventTarget.dispatchEvent()方法在当前节点上出发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要一个监听函数调用了 Event.preventDefault()，则返回 false，否则返回 true。
EventTarget.dispatchEvent(event)
example 3:
oDiv.addEventListener(‘click’,eventFun,false); var event = new Event(‘click); oDiv.dispatchEvent(event);// 自动执行 click 事件。
2. 监听函数
浏览器的事件模型就是通过监听函数来对事件作出反应的，浏览器监听到这个事件就会执行对应的监听函数。javascript 中有三种方法可以为事件绑定监听函数
2.1 html 的 on- 属性(事件名)
<div class=”addPanel” onclick=”doFun()”></div>
// 这样绑定的是函数名 +(), 这样当事件发生时就会立即执行函数
2.2 元素节点的事件属性
div.onclick=function(){
console.log(‘ 节点事件 ’)
}
2.3 EventTarget.addEventListener() 使用方法同第一小节
2.4 总结 第一种方法违反了 html 与 javascriot 代码分离的原则，不利于代码分工，不推荐使用。第二种方法，同一个事件只能定义一个监听函数。如果定义多次，后一次会把前面的覆盖掉。不推荐使用。第三种是比较推荐且官方指定的监听函数方法，原因如下：
1. 同一个事件可以添加多个监听函数。
2. 能够指定在哪个阶段触发监听函数。
3. 除了 DOM 节点，其他对象 (比如：window,XMLHttpRequest 等) 也有这个接口，它等于是整个 javascript 统一的监听函数接口。