EventTarget 事件目标

EventTarget 是一个可以接收事件和创建事件监听函数的接口，以对象的方式实现。

Element、document 和 window 是最常见的事件目标，其他对象也可以是事件目标，比如 XMLHttpRequest、AudioNode、AudioContext 等。

构造函数

1

EventTarget()

创建 EventTarget 对象，并返回之。

方法

addEventListener()

注册一个指定类型的事件处理函数。

参数

• type: string
• listener: Function
• options?: { capture: boolean; once: boolean; passive: boolean }

返回值

void

removeEventListener()

删除使用 addEventListener() 方法添加的事件处理函数。

参数

• type: string
• listener: Function
• options?: { capture: boolean; passive: boolean }

返回值

void

dispatchEvent()

派发事件

参数

• event: Event 派发的事件对象

返回值

若该事件

1. 声明了cancelable: true
2. 事件处理函数调用了 Event.preventDefault()

则返回 false，否则返回 true。

若传递一个没有指定事件类型（或事件类型为 null 或空字符串）的事件对象，该方法会抛出 UNSPECIFIED_EVENT_TYPE_ERR 异常。

事件处理程序在一个嵌套的调用堆栈上运行，会阻塞调用者直到它们完成，但是异常不会传播到调用者，因此事件处理函数抛出的异常无法被捕获；

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// 初始化 EventTarget 对象
const eventTarget = new EventTarget();
// 初始化 Event 对象
const event = new Event('act');

eventTarget.addEventListener('act', handler1);
eventTarget.dispatchEvent(event); // true
/* console
act fired by handler1
*/

eventTarget.addEventListener('act', handler2);
eventTarget.dispatchEvent(event); // false
/* console
act fired by handler1
act fired by handler2
*/

eventTarget.removeEventListener('act', handler2);
eventTarget.dispatchEvent(event); // false
/* console
act fired by handler1
*/

function handler1(event) {
  console.log(event.type + ' fired by handler1')
}
function handler2(event) {
  event.preventDefault();
  console.log(event.type + ' fired by handler2')
}