Event

1、接口定义

Event 接口表示在 DOM 中出现的事件。

一些事件是由用户触发的，例如鼠标或键盘事件；或者由 API 生成以表示异步任务的进度。事件也可以通过编程方式触发，例如对元素调用 HTMLElement.click() 方法，或者定义一些自定义事件，再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标（target）。

很多 DOM 元素可以被设计接收 (或者监听) 这些事件，并且执行代码去响应（或者处理）它们。通过 EventTarget.addEventListener() 方法可以将事件处理器绑定到不同的 HTML 元素上（比如 <button>、<div>、<span> 等等）。这种方式基本替换了老版本中使用 HTML 事件处理器属性的方式。此外，在正确添加后，还可以使用 removeEventListener() 方法移除这些事件处理器。

注意

一个元素可以绑定多个事件处理器，甚至是对于完全相同的事件。尤其是相互独立的代码模块出于不同的目的附加事件处理器。（比如，一个网页同时有着广告模块和统计模块同时监听视频播放。）

有很多事件接口都是基于Event的， 比如MouseEvent, DragEvent, TouchEvent, CustomEvent等等。

2、实例属性

列举一些常用的

1. Event.currentTarget,对事件当前注册的目标的引用。这是一个当前计划将事件发送到的对象。它是有可能在重定向（retarget）的过程中被改变的。
2. Event.target, 对最初分发事件的对象的引用。
3. Event.type 事件的类型
4. Event.bubbles一个布尔值，用来表示该事件是否会在 DOM 中冒泡。
5. Event.cancelable 只读一个布尔值，表示事件是否可以取消。

3、EventTarget

EventTarget 接口由可以接收事件、并且可以创建侦听器的对象实现。换句话说，任何事件目标都会实现与该接口有关的这三个方法。

EventTarget.addEventListener() 在 EventTarget 上注册特定事件类型的事件处理程序。

EventTarget.removeEventListener() EventTarget 中删除事件侦听器。

EventTarget.dispatchEvent() 将事件分派到此 EventTarget。

4、创建和触发事件

4.1 触发内置事件

<script>
  const input = document.querySelector('#username');
  function inputHandler(e) {
    console.log(e.target.value);
  }
  input.addEventListener('input', inputHandler);
  const event = new Event('input');
  setTimeout(() => {
    // 3秒后会再次触发input事件，调用inputHandler
    input.dispatchEvent(event);
  }, 3000);
</script>

4.2 触发自定义事件

const target = new EventTarget();
target.addEventListener('read', e => {
  console.log(e, 'read');
});
const readEvent = new Event('read');
target.dispatchEvent(readEvent);

这个完全可以当做一个订阅机制来用，毕竟EventTarget很多时间都得自己开发。

4.3 使用CustomEvent传递自定义参数

要向事件对象添加更多数据，可以使用 CustomEvent 接口，detail 属性可用于传递自定义数据。 例如，可以像这样创建事件：

const target = new EventTarget();
target.addEventListener('read', e => {
  console.log(e.detail);
});
const readEvent = new CustomEvent('read', { detail: 'read a.txt' });
target.dispatchEvent(readEvent);