事件目标（EventTarget）

什么是事件目标？我相信大家都很难回答，但是如果我问，什么是 addEventListener？相信你们一下子就能说的滔滔不绝。

没错，我们本节要介绍的就是 addEventListener。

首先，我来讲下什么是 EventTarget 吧。

EventTarget 就是由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。

而其中的 Element、document 和 Window 是我们最常见的事件目标。

事件目标的特点如下：

1. EventTarget 对象表示在发生事件时分派事件的目标。

2. 每个 EventTarget 对象都有一个关联的事件侦听器列表。
3. 事件监听器可用于观察特定事件。

它所指的也就是我们常使用的 target.addEventListener(type, listener[, options]) 方法。

那么相对应的还有 removeEventListener 方法，相信大家也都很熟悉了。

而关于 IE8 及以下版本中的 attachEvent 和 detachEvent 这 2 个不标准规范中的方法，我就不想讲了，希望它们能随着这段历史而消亡。

addEventListener

为类型属性值为 type 的事件附加事件侦听器。 callback 参数设置在分派事件时将调用的回调。

假如说同一个目标的事件监听是同一个类型的话，那么它的事件会被覆盖，这和 onclick 事件一样，后面的函数会将前面的给覆盖掉。

---

removeEventListener

这个方法可以移除目标的事件监听。

这里需要注意，我们最好是将回调函数放在外面书写，这样，add 和 remove 时的回调函数才是同一函数，否则将执行 2 个函数。

btn.addEventListener('click',function() {
    console.log('good');
  });
  btn.removeEventListener('click',function() {
    console.log('bad');
  });

就像上面的书写方式，其实是不对的，它相当于执行的 2 个不同的回调函数，因此后面的 removeEventListener 其实是不起作用的。

---

dispatchEvent

将合成事件分派到目标，并在任一事件的 cancelable 属性值为 false 或未调用 preventDefault() 方法时返回 true，否则返回 false。

这其实就是我们上两节所讲到的内容。可以采用下面的写法：

elem.dispatchEvent(event);

这样，事件就可以被分配到某一我们需要的节点上。

另外，如果我们需要它为 false 时，我们只需要使用如下的方式就可以实现：

cancelled = !target.dispatchEvent(event)

实际上内容就这么点，我们就讲完啦，下面我们开始节点（Node）的讲解。