O método addEventListener () - código de exemplo de listener de eventos JavaScript

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

Compreendendo eventos e manipuladores de eventos

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

Por exemplo, quando o navegador termina de carregar um documento, um loadevento ocorreu. Se um usuário clicar em um botão em uma página, um clickevento aconteceu.

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

Nesses cenários, você precisa de um manipulador de eventos para detectar quando um evento ocorre. Dessa forma, você pode configurar o código para reagir aos eventos conforme eles acontecem instantaneamente.

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

Sintaxe addEventListener ()

Esta é a sintaxe:

target.addEventListener(event, function, useCapture) 
  • target : o elemento HTML ao qual você deseja adicionar seu manipulador de eventos. Este elemento existe como parte do Document Object Model (DOM) e você pode querer aprender sobre como selecionar um elemento DOM.
  • evento : uma string que especifica o nome do evento. Já mencionamos loade clickeventos. Para os curiosos, aqui está uma lista completa de eventos HTML DOM.
  • função : especifica a função a ser executada quando o evento é detectado. Essa é a mágica que pode permitir que suas páginas da web mudem dinamicamente.
  • useCapture : um valor booleano opcional (verdadeiro ou falso) que especifica se o evento deve ser executado na fase de captura ou bolha. No caso de elementos HTML aninhados (como um imgdentro de a div) com manipuladores de eventos anexados, esse valor determina qual evento é executado primeiro. Por padrão, é definido como falso, o que significa que o manipulador de eventos HTML mais interno é executado primeiro (fase de bolha).

Exemplo de código addEventListener ()

Este é um exemplo simples que fiz que mostra você 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 comid='button'
  • função : função anônima (seta) que configura o código necessário para revelar / ocultar a mensagem
  • useCapture : da esquerda para o valor padrão defalse

Minha função é capaz de revelar / ocultar a mensagem adicionando / removendo uma classe CSS chamada "revelar" que altera a visibilidade do elemento da mensagem.

Claro, em seu código, sinta-se à vontade para personalizar esta função. Você também pode substituir a função anônima por uma função nomeada de sua preferência.

Passando Evento como um Parâmetro

Às vezes, podemos querer saber mais informações sobre o evento, como 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 o id do elemento:

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

Aqui, o parâmetro do evento é uma variável chamada, emas 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 de destino.

Você não precisa fazer nada de especial e o JavaScript sabe automaticamente o que fazer quando você passa um parâmetro dessa maneira para sua função.

Removendo manipuladores de eventos

Se por algum motivo você não quiser mais que um manipulador de eventos seja ativado, veja como removê-lo:

target.removeEventListener(event, function, useCapture); 

Os parâmetros são iguais a addEventListener().

A prática leva à perfeição

A melhor maneira de melhorar os manipuladores de eventos é praticar com seu próprio código.

Aqui está um projeto de exemplo que fiz em que usei manipuladores de eventos para alterar a cor, o tamanho e a velocidade das bolhas que fluem pelo plano de fundo de uma página da web (você precisará clicar no painel central para revelar os controles).

Divirta-se e faça algo incrível!

Para obter mais conhecimento de desenvolvimento web para iniciantes, visite meu blog em 1000 Mile World e siga-me no Twitter.