O método addEventListener () – Código de exemplo do JavaScript Event Listener

Noções básicas sobre 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 sejam alterados dinamicamente.

Por exemplo, quando o navegador terminar de carregar um documento, um load evento ocorreu. Se um usuário clicar em um botão em uma página, um click evento aconteceu.

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

Nesses cenários, você precisa de um manipulador de eventos para detectar quando um evento acontece. Dessa forma, você pode configurar o código para reagir aos eventos conforme eles ocorrem em tempo real.

JavaScript fornece um manipulador de eventos na forma do addEventListener() método. Esse 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 ()

Aqui está a sintaxe:

target.addEventListener(event, function, useCapture)

• alvo: o elemento HTML ao qual você deseja adicionar seu manipulador de eventos. Este elemento existe como parte do DOM (Document Object Model) e você pode querer aprender sobre como selecionar um elemento DOM.
• evento: uma sequência que especifica o nome do evento. Nós já mencionamos load e click eventos. Para os curiosos, aqui está uma lista completa de Eventos DOM HTML.
• 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 sejam alteradas dinamicamente.
• useCapture: um valor booleano opcional (verdadeiro ou falso) que especifica se o evento deve ser executado no diretório fase de captura ou borbulhamento. No caso de elementos HTML aninhados (como um img dentro de um div) com manipuladores de eventos anexados, esse valor determina qual evento será executado primeiro. Por padrão, é definido como false, 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 a 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():

• alvo: Elemento HTML com id='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 de false

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

Obviamente, no seu código, fique à vontade para personalizar essa 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 e mas pode ser facilmente chamado 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 passa um parâmetro dessa maneira para sua função.

Removendo manipuladores de eventos

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

target.removeEventListener(event, function, useCapture);

Os parâmetros são os mesmos que 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 Eu usei os manipuladores de eventos para alterar a cor, o tamanho e a velocidade das bolhas que fluem pelo 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 conhecimentos sobre desenvolvimento da Web para iniciantes, visite meu blog em 1000 Mile World e me siga Twitter.