事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件。 ## 一、概述 DOM 的事件操作（监听和触发），都定义在`EventTarget`接口。所有节点对象都部署了这个接口。 该接口主要提供三个实例方法。 * `addEventListener`：绑定事件的监听函数 * `removeEventListener`：移除事件的监听函数 * `dispatchEvent`：触发事件 ## 二、EventTarget.addEventListener() `EventTarget.addEventListener()`用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。 ~~~ target.addEventListener(type, listener[, useCapture]); ~~~ 该方法接受三个参数。 * `type`：事件名称，大小写敏感。 * `listener`：监听函数。事件发生时，会调用该监听函数。 * `useCapture`：布尔值，表示监听函数是否在捕获阶段（capture）触发。 下面是一个例子。 ~~~ function hello() { console.log('Hello world'); } var button = document.getElementById('btn'); button.addEventListener('click', hello, false); ~~~ 上面代码中，`button`节点的`addEventListener`方法绑定`click`事件的监听函数`hello`，该函数只在冒泡阶段触发。 ## 三、EventTarget.removeEventListener() `EventTarget.removeEventListener`方法用来移除`addEventListener`方法添加的事件监听函数。 ~~~ div.addEventListener('click', listener, false); div.removeEventListener('click', listener, false); ~~~ `removeEventListener`方法的参数，与`addEventListener`方法完全一致。它的第一个参数“事件类型”，大小写敏感。 注意，`removeEventListener`方法移除的监听函数，必须是`addEventListener`方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。 ## 四、EventTarget.dispatchEvent() `EventTarget.dispatchEvent`方法在当前节点上触发指定事件，从而触发监听函数的执行。 ~~~ target.dispatchEvent(event) ~~~ `dispatchEvent`方法的参数是一个`Event`对象的实例。 ~~~ para.addEventListener('click', hello, false); var event = new Event('click'); para.dispatchEvent(event); ~~~ 上面代码在当前节点触发了`click`事件。