EventTarget

A interface EventTarget representa um objeto que recebe eventos e executa os listeners registrados para eles. Todo event target implementa seus três métodos: addEventListener(), removeEventListener() e dispatchEvent(). Para mais informações, consulte EventTarget na MDN Web Docs.

Em uma function, globalThis é um event target. O addEventListener global registra o handler fetch nele, e um listener de um tipo de evento personalizado é executado quando globalThis.dispatchEvent() despacha esse tipo. Crie seus próprios event targets para construir objetos que despacham e escutam eventos personalizados enquanto uma function processa uma requisição. Adicione e remova listeners em tempo de execução para controlar quais handlers reagem a um evento.

Em um navegador, os event targets mais comuns são os elementos e seus filhos, o Document e o Window. Objetos como XMLHttpRequest, AudioNode e AudioContext também são event targets. Elementos, documentos e janelas também aceitam event handlers por meio de propriedades e atributos onevent. Uma function não tem o objeto document: uma referência a ele lança ReferenceError: document is not defined.

nota — Com azion dev, CustomEvent não está definido, globalThis não é um EventTarget e globalThis.dispatchEvent não é uma função. Os event targets que você constrói se comportam da mesma forma nos dois ambientes.

Construtor

new EventTarget()

EventTarget() cria um event target sem listeners. Uma classe que estende EventTarget herda os três métodos: uma instância de class Bus extends EventTarget {} executa os listeners adicionados a ela.

Métodos

Método	Descrição
`target.addEventListener(type, listener, options)`	Registra `listener` para eventos do tipo `type`. Com `{ once: true }` como `options`, o listener é executado apenas no primeiro despacho.
`target.removeEventListener(type, listener)`	Remove o listener registrado com os mesmos `type` e `listener`. Despachos posteriores de `type` não o executam.
`target.dispatchEvent(event)`	Despacha `event` para os listeners registrados para o tipo dele. Retorna `false` quando `event` é cancelável e um listener chama `preventDefault()`.

dispatchEvent() recebe um Event, como new Event('ping', { cancelable: true }), ou um CustomEvent. Um listener lê o valor detail de um CustomEvent em event.detail.

Exemplo

Este handler registra um listener em um event target, despacha o evento, remove o listener e despacha o evento de novo. Ele retorna o número de vezes que o listener foi executado e os tipos de evento que recebeu:

JavaScript

01export default {

02 async fetch(request, env, ctx) {

03 const target = new EventTarget();

04 const seen = [];

05 const handler = (event) => seen.push(event.type);

06 target.addEventListener('ping', handler);

07 target.dispatchEvent(new Event('ping'));

08 target.removeEventListener('ping', handler);

09 target.dispatchEvent(new Event('ping'));

10 return Response.json({ calls: seen.length, seen });

11 },

12};

A function retorna estes valores. O listener é executado uma vez, porque o segundo despacho ocorre depois de removeEventListener():

JSON

01{

02 "calls": 1,

03 "seen": [

04 "ping"

05 ]

06}

Recursos relacionados

addEventListener

Como uma function registra seu handler fetch no event target global.

FetchEvent

O evento que o runtime despacha para cada requisição recebida.

Handlers

Os formatos de handler que uma function pode exportar para responder a uma requisição.

Web APIs

As outras Web APIs que o Azion Runtime suporta.