# 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) na MDN Web Docs.

Em uma function, `globalThis` é um event target. O [addEventListener](/pt-br/documentacao/devtools/runtime/api-reference/add-eventlistener/) 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](https://developer.mozilla.org/en-US/docs/Web/API/Element) e seus filhos, o [Document](https://developer.mozilla.org/en-US/docs/Web/API/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](https://developer.mozilla.org/en-US/docs/Web/Events/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

```javascript
new EventTarget()
```

[EventTarget()](https://developer.mozilla.org/en-US/docs/Web/API/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)`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) | Registra `listener` para eventos do tipo `type`. Com `{ once: true }` como `options`, o listener é executado apenas no primeiro despacho.            |
| [`target.removeEventListener(type, listener)`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)    | Remove o listener registrado com os mesmos `type` e `listener`. Despachos posteriores de `type` não o executam.                                      |
| [`target.dispatchEvent(event)`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent)                         | 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
export default {
  async fetch(request, env, ctx) {
    const target = new EventTarget();
    const seen = [];
    const handler = (event) => seen.push(event.type);
    target.addEventListener('ping', handler);
    target.dispatchEvent(new Event('ping'));
    target.removeEventListener('ping', handler);
    target.dispatchEvent(new Event('ping'));
    return Response.json({ calls: seen.length, seen });
  },
};
```

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

```json
{
 "calls": 1,
 "seen": [
  "ping"
 ]
}
```

---

## Recursos relacionados

- [addEventListener](/pt-br/documentacao/devtools/runtime/api-reference/add-eventlistener.md): Como uma function registra seu handler `fetch` no event target global.
- [FetchEvent](/pt-br/documentacao/devtools/runtime/api-reference/fetch-event.md): O evento que o runtime despacha para cada requisição recebida.
- [Handlers](/pt-br/documentacao/devtools/runtime/api-reference/handlers.md): Os formatos de handler que uma function pode exportar para responder a uma requisição.
- [Web APIs](/pt-br/documentacao/devtools/runtime/api-reference/javascript.md): As outras Web APIs que o Azion Runtime suporta.