IkeqIkeq

The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

EventTarget 事件目标

Jan 14, 2017Programming412 words in 2 min

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

Elementdocumentwindow 是最常见的事件目标,其他对象也可以是事件目标,比如 XMLHttpRequestAudioNodeAudioContext 等。

构造函数

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')
}

Buy me a cup of milk 🥛.