Eventos do DOM: Como usar eventos de clique em JavaScript

Por: Angelo Luis Ferreira | 24/10/2023 Acessos: 1.434

Objetivo

Neste tutorial, você verá como utilizar eventos de clique em JavaScript. Eventos de clique são ações que ocorrem quando um leitor clica com o mouse sobre um link, botões ou outros elementos de interface com o usuário HTML em uma página web.

Obs.: O evento de clique ocorre mais precisamente no momento em que o leitor solta o botão do mouse após clicar em um elemento HTML em uma página web.

Inicialmente vamos abordar o evento onclick que pode ser definido diretamente no próprio elemento HTML. Em seguida, abordaremos uma forma mais moderna, onde utilizaremos o método eventListener() "click". Leia também: Como criar múltiplos eventos em um único elemento HTML - JavaScript

Definições

Eventos do DOM: Em JavaScript, eventos são funcionalidades de manipulação do DOM (Document Object Model) que permitem a interação dos elementos da página web com o usuário.

DOM (Document Object Model ou Modelo de Objeto de Documento): É uma representação estruturada e hierárquica dos elemento HTML de uma página web. Por meio de linguagens de programação, como o JavaScript por exemplo, podemos acessar, modificar e atualizar seus elementos e atributos inseridos em uma página web.

Formas para usar eventos de "clique" em JavaScript: Existem várias formas para utilizar eventos no JavaScript. Para a utilização de eventos de "clique", podemos utilizar dois formatos poderosos:

a. Usando atributos do HTML: Consiste em adicionar atributos HTML diretamente aos elementos alvos. Podemos executar uma função JavaScript quando clicarmos em um botão ou em algum outro elemento HTML, por exemplo. Basta atribuirmos o atributo onclick ao elemento HTML e atribuir a ele a função desejada. Este formato é muito útil para interações simples.

Embora o uso do atributo "onclick" seja uma maneira direta de adicionar eventos de clique, é importante observar que essa abordagem tende a misturar o código JavaScript com o HTML, o que pode tornar o código menos organizado em projetos maiores. É por isso que, em muitos casos, é preferível usar o método de "eventListener" para adicionar eventos de clique, mantendo o JavaScript separado do HTML.

b. Manipulando eventos via JavaScript: Podemos criar eventos de clique utilizando event listeners em JavaScript, através do método eventListener(). Desta forma, é possível registrar uma função que será ser executado quando clicarmos em um determinado elemento HTML. Este formato fornece maior flexibilidade e escabilidade, pois permite adicionar e remover eventos de acordo a necessidade. Além disso permite também múltiplos eventos em um único elemento HTML.

Compreender como aplicar eventos de clique é um passo essencial na busca da interatividade nas páginas da web, enriquecendo a experiência do leitor de forma significativa.

1.Usando o atributo HTML "onclick"

1.1. O evento onclick executa uma funcionalidade específica quando um elemento HTML é clicado pelo mouse. Embora o elemento botão seja utilizado frequentemente para esta funcionalidade, é possível aplicarmos o atributo onclick a outros elementos HTML também.

1.1.1. O atributo onclick é uma maneira tradicional de adicionar eventos de clique diretamente a elementos HTML. Ele permite que você associe uma ação a um elemento quando o usuário clica nele. 

1.1.2. Para que possamos atribuir essa funcionalidade é necessário inserirmos a função JavaScript que desejamos executar dentro da tag de abertura do elemento HTML que se deseja clicar.

1.1.3. Quando o elemento é clicado, a função ou código JavaScript especificado no atributo onclick é executado.

1.2. Sintaxe básica:

<elemento onclick="function()">Clique aqui</element>

1.2.1. Onde:

elemento: elemento HTML que se deseja executar um evento específico quando clicado.

onclick: atributo HTML para apontar uma função JavaScript que será executada quando o elemento HTML for clicado.

1.3. Exemplos de como você pode usar o atributo onclick:

1.3.1. Neste exemplo, temos um botão que exibe uma mensagem de alerta quando é clicado. O atributo "onclick" está vinculado à função "exibirMensagem()", que é executada quando o botão é clicado.

<!DOCTYPE html>
<html>
<head>
  <title>Exemplo de onclick</title>
</head>
<body>
  <button onclick="exibirMensagem()">Clique em mim</button>
  
  <script>
    function exibirMensagem() {
      alert("Você clicou no botão!");
    }
  </script>
</body>
</html>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

1.3.2. Neste segundo exemplo, ao clicar em um parágrafo, a cor do texto muda para vermelho. O atributo "onclick" está vinculado à função "mudarCor()", que manipula o estilo do elemento quando ele é clicado.

<!DOCTYPE html>
<html>
<head>
  <title>Exemplo de onclick</title>
</head>
<body>
  <p onclick="mudarCor()">Clique neste parágrafo para mudar a cor do texto.</p>
  
  <script>
    function mudarCor() {
      document.querySelector('p').style.color = 'red';
    }
  </script>
</body>
</html>
  

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

2.Usando o método addEventListener() com evento 'click'

2.1. O método addEventListener() é uma abordagem moderna e mais flexível para lidar com eventos em comparação com o uso do atributo onclick. Ele permite adicionar um "ouvinte de eventos" a um elemento HTML específico para ouvir quando um evento, como um clique, ocorre.

2.1.1. Os 'ouvintes de eventos' em JavaScript são blocos de código que são executados quando um determinado evento é acionado em um elemento HTML. Eles permitem que você capture eventos específicos e execute ações correspondentes.

2.1.2. Quando utilizamos o método addEventListener() para criar eventos em JavaScript podemos separar o código HMTL do JavaScript, permitindo maior flexibilidade para adicionar ou remover eventos de acordo com a nossa necessidade. Também permite a criação de múltiplos eventos em um único elemento HTML, leia: Como criar múltiplos eventos em um único elemento HTML - JavaScript

2.1. Sintaxe básica:

// Seleciona o elemento HTML
const meuElemento = document.getElementById('idDoElemento');

// Adiciona um eventListener para o evento 'click'
meuElemento.addEventListener('click', function() {
  // Código a ser executado quando o elemento é clicado
});

2.2.1. Onde:

• meuElemento é o elemento HTML ao qual você deseja adicionar o eventListener. Pode ser selecionado por meio de document.getElementById(), document.querySelector(), ou outros métodos de seleção de elementos.

• addEventListener() é o método usado para adicionar um ouvinte de eventos ao elemento.

• 'click' é o tipo de evento que estamos ouvindo. Neste caso, estamos ouvindo o evento de clique.

• A função anônima (ou pode ser uma função nomeada) dentro do addEventListener() é o código que será executado quando o evento 'click' ocorrer no elemento selecionado.

 2.3. Exemplos de como você pode usar o método addEventListener()

 2.3.1. Neste exemplo, usamos addEventListener() para adicionar um ouvinte de eventos ao botão. Quando o botão é clicado, a função anônima definida é executada, exibindo uma mensagem de alerta.

<!DOCTYPE html>
<html>
<head>
  <title>Exemplo de addEventListener</title>
</head>
<body>
  <button id="meuBotao">Clique em mim</button>
  
  <script>
    // Seleciona o botão
    const botao = document.getElementById('meuBotao');
    
    // Adiciona um eventListener para o evento 'click'
    botao.addEventListener('click', function() {
      alert('Você clicou no botão!');
    });
  </script>

</body>
</html>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

 2.3.1. Neste segundo exemplo, ao clicar no parágrafo, o texto muda para a cor azul. O addEventListener() é usado para adicionar um ouvinte de eventos ao parágrafo, que modifica o estilo do texto quando o parágrafo é clicado.

<!DOCTYPE html>
<html>
<head>
  <title>Exemplo de addEventListener</title>
</head>
<body>
  <p id="meuParagrafo">Clique neste parágrafo para mudar a cor do texto.</p>
  
  <script>
    // Seleciona o parágrafo
    const paragrafo = document.getElementById('meuParagrafo');
    
    // Adiciona um eventListener para o evento 'click'
    paragrafo.addEventListener('click', function() {
      paragrafo.style.color = 'blue';
    });
  </script>

</body>
</html>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

REFERÊNCIAS VISUALDICAS

• Manipulando o DOM: como selecionar elementos HTML usando JavaScript
• Como manipular propriedades CSS com JavaScript
• Como criar múltiplos eventos em um único elemento HTML - JavaScript

REFERÊNCIA JAVASCRIPT

1. [Introdução a eventos] >> Sintaxe e exemplos - MDN Web Docs.

2. [Manipulador onclick] >> Sintaxe e exemplos - MDN Web Docs.

3. [Element.addEventListener()] » Sobre a propriedade children - MDN Web Docs.

4. [EventTarget.removeEventListener()] >> Sintaxe e exemplos - MDN Web Docs.

5. [getElementById()] >> Sintaxe e exemplos - MDN Web Docs.

6. [getElementsByClassName()] >> Sintaxe e exemplos - MDN Web Docs.

7. [getElementsByTagName()] >> Sintaxe e exemplos - MDN Web Docs.

8. [querySelector()] >> Sintaxe e exemplos - MDN Web Docs.

9. [querySelectorAll()] >> Sintaxe e exemplos - MDN Web Docs.