# addEventListener

A função `addEventListener` define o gatilho que executa o seu código do Azion Runtime com os dados de cada requisição. O listener se registra para o tipo de evento `fetch` e recebe um [FetchEvent](/pt-br/documentacao/devtools/runtime/api-reference/fetch-event/), que carrega a requisição. Use essa função para rotear requisições por caminho ou método, ou para adicionar autenticação, reescrever headers e redirecionar antes que uma requisição chegue a uma origem. Um listener também pode gerar conteúdo personalizado ou variantes de testes A/B, ou retornar uma resposta que ele constrói com a sua própria lógica de cache. Para mais informações, consulte [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) na MDN Web Docs.

> **nota**
>
> Com o `azion dev`, o hot reload não consegue trocar uma entrada `export default` por `addEventListener`: o servidor para com `No matching export in "index.js" for import "default"`. Inicie o `azion dev` novamente para servir a nova entrada.

---

## Sintaxe

```javascript
addEventListener(type, listener)
```

| Parâmetro  | Tipo     | Descrição                                                                  |
| ---------- | -------- | -------------------------------------------------------------------------- |
| `type`     | String   | Tipo de evento para o qual o listener se registra: `fetch`.                |
| `listener` | Function | Função que o runtime chama com o `FetchEvent` de cada requisição recebida. |

---

## Exemplo

Este listener responde a cada requisição com uma [Response](/pt-br/documentacao/devtools/runtime/api-reference/response/) em texto simples por meio de `event.respondWith()`:

```javascript
addEventListener("fetch", event => {
  return event.respondWith(
    new Response("Hello world")
  )
})
```

O listener retorna uma resposta com este status, estes headers e este corpo:

```json
{
 "status": 200,
 "statusText": "",
 "headers": {
  "content-type": "text/plain;charset=UTF-8"
 },
 "body": "Hello world"
}
```

---

## Recursos relacionados

- [FetchEvent](/pt-br/documentacao/devtools/runtime/api-reference/fetch-event.md): O evento que um listener `fetch` recebe e a requisição que ele carrega.
- [Handlers](/pt-br/documentacao/devtools/runtime/api-reference/handlers.md): A entrada `export default { fetch }` recomendada para uma function.
- [fetch](/pt-br/documentacao/devtools/runtime/api-reference/fetch.md): Como uma function envia a sua própria requisição e lê a resposta.
- [Web APIs](/pt-br/documentacao/devtools/runtime/api-reference/javascript.md): As outras Web APIs que o Azion Runtime suporta.