Artigo original: https://www.freecodecamp.org/news/javascript-addeventlistener-example-code/

O método addEventListener() do JavaScript permite que você configure funções a serem chamadas quando um evento específico acontece, como, por exemplo, quando um usuário clica em um botão. Este tutorial mostra como você pode implementar o addEventListener() no seu código.

Entendendo eventos e manipuladores de eventos (event handlers)

Eventos são ações que acontecem quando o usuário ou o navegador manipula uma página. Eles desempenham um papel importante, pois podem fazer com que elementos de uma página da web mudem dinamicamente.

Quando o navegador, por exemplo, termina de carregar um documento, ocorreu um evento load. Se um usuário clicar em um botão em uma página, um evento click terá acontecido.

Muitos eventos podem acontecer uma vez, várias vezes, ou nunca. Você também pode não saber quando um evento vai acontecer, especialmente se ele for gerado pelo usuário.

Nesses cenários, você precisa de um  manipulador de evento (em inglês, event handler) para detectar quando um evento acontece. Desse modo, você pode criar um código para reagir aos eventos à medida que eles acontecem.

O JavaScript fornece um manipulador de evento (event handler) na forma do método addEventListener(). Este handler pode ser anexado ao elemento HTML específico para o qual você deseja monitorar eventos. Cada elemento pode ter mais de um handler anexado.

Sintaxe de addEventListener()

Aqui está a sintaxe:

target.addEventListener(event, function, useCapture)
  • target: o elemento HTML ao qual você deseja adicionar seu manipulador de eventos (event handler). Este elemento existe como parte do Document Object Model (DOM). Aprenda como selecionar um elemento DOM (texto e curso em inglês).
  • event: uma string que especifica o nome do evento. Já mencionamos eventos de load e click. Para os curiosos, aqui está uma lista completa de eventos do DOM do HTML (em inglês).
  • function: especifica a função a ser executada quando o evento for detectado. Esta é a magia que pode permitir que as suas páginas web mudem dinamicamente.
  • useCapture: um valor booleano opcional (verdadeiro ou falso) que especifica se o evento deve ser executado na fase de captura ou de envio aos eventos pais (texto em inglês). No caso de elementos HTML aninhados (como um img dentro de um div) com manipuladores de eventos anexados, este valor determina qual evento é executado primeiro. Por padrão, ele é definido como falso, o que significa que o manipulador de eventos do elemento HTML mais interno é executado primeiro (fase de envio).

Exemplo de código do addEventListener()

Exemplo simples de demonstração do addEventListener()

Este é um exemplo simples que fiz e que mostra o addEventListener() em ação.

Quando um usuário clica no botão, uma mensagem é exibida. Outro clique no botão oculta a mensagem. Aqui está o JavaScript relevante:

let button = document.querySelector('#button');
let msg = document.querySelector('#message');

button.addEventListener('click', ()=>{
  msg.classList.toggle('reveal');
})

Seguindo a sintaxe mostrada anteriormente para addEventListener():

  • target: elemento HTML com id='button'
  • function: função anônima (arrow function) que configura o código necessário para revelar/ocultar a mensagem
  • useCapture: deixado com o valor padrão de false

A minha função é capaz de revelar/ocultar a mensagem adicionando/removendo uma classe de CSS chamada "reveal" (revelar) que muda a visibilidade do elemento da mensagem.

É claro que, no seu código, você pode ficar à vontade para personalizar essa função. Você também pode substituir a função anônima por uma função nomeada apropriadamente.

Passando eventos como parâmetro

Às vezes, podemos querer saber mais informações sobre o evento, como, por exemplo, qual elemento foi clicado. Nesta situação, precisamos passar um parâmetro de evento para nossa função.

Este exemplo mostra como você pode obter a identificação do elemento:

button.addEventListener('click', (e)=>{
  console.log(e.target.id)
})

Aqui, o parâmetro do evento é uma variável chamada e, mas pode ser facilmente chamada de qualquer outra coisa, como "evento". Este parâmetro é um objeto que contém várias informações sobre o evento, como o id do destino (em inglês, target).

Você não precisa fazer nada de especial. O JavaScript saberá automaticamente o que fazer quando você passar um parâmetro desse modo para sua função.

Removendo event handlers

Se, por algum motivo, você não quiser mais que um event handlerseja ativado, aqui está como removê-lo:

target.removeEventListener(event, function, useCapture);

Os parâmetros são os mesmos que os de addEventListener().

A prática leva à perfeição

A melhor maneira de melhorar com event handlers é praticar com seu próprio código.

Aqui está um exemplo de projeto que fiz onde usei event handlers para mudar a cor, tamanho e velocidade das bolhas que fluem através do fundo de uma página da web (você precisará clicar no painel central para revelar os controles).

Agora, divirta-se e faça coisas fantásticas!

Para saber mais sobre desenvolvimento para a web para iniciantes, visite o GitHub do autor, 1000MileWorld, e siga o autor no Twitter.