Manipuladores de eventos em JavaScript

Benedito Silva Júnior 26/11/2021

Se você está começando a programar em JavaScript, uma das funcionalidades mais importantes que você vai encontrar são os manipuladores de eventos. Eles são usados para capturar e responder a interações do usuário, como cliques, rolagem de página, pressionamento de teclas, entre outros. Neste post, fique por dentro dos Manipuladores de eventos em JavaScript.

O que é um evento?

Um evento é qualquer interação que acontece em uma página web. Por exemplo:

Um clique de mouse.
Pressionar uma tecla no teclado.
O carregamento completo de uma página.

JavaScript permite que você associe funções a esses eventos, para que algo aconteça sempre que o usuário realizar uma ação.

Adicionando um manipulador de eventos

Para adicionar um manipulador de eventos, usamos o método addEventListener. Ele é a maneira mais comum de escutar eventos em elementos HTML. O formato básico é:

elemento.addEventListener(tipoEvento, funcao);

elemento: O elemento HTML que vai receber o evento (por exemplo, um botão ou um input);
tipoEvento: O tipo de evento que você quer escutar, como click, keydown, mouseover, etc;
funcao: A função que será executada quando o evento ocorrer.

Exemplo prático: Clique em um botão

Vamos ver um exemplo prático. Aqui está o código de um botão que exibe uma mensagem no console quando clicado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Evento</title>
</head>
<body>
  <button id="meuBotao">Clique em mim</button>

  <script>
    const botao = document.getElementById('meuBotao');

    botao.addEventListener('click', function() {
      console.log('Você clicou no botão!');
    });
  </script>
</body>
</html>

Aqui, estamos usando o evento click para ouvir o momento em que o usuário clica no botão e, em seguida, exibimos uma mensagem no console.

Manipuladores de eventos comuns

Aqui estão alguns dos eventos mais comuns que você pode usar:

click: Disparado quando o usuário clica em um elemento.

elemento.addEventListener('click', funcao);

keydown: Disparado quando o usuário pressiona uma tecla.

elemento.addEventListener('keydown', funcao);

mouseover: Disparado quando o usuário passa o cursor sobre um elemento.

elemento.addEventListener('mouseover', funcao);

submit: Disparado quando um formulário é enviado.

formulario.addEventListener('submit', funcao);

scroll: Disparado quando o usuário rola a página.

window.addEventListener('scroll', funcao);

Removendo um manipulador de eventos

Para remover um manipulador de eventos, você pode usar o método removeEventListener. Ele deve ser chamado com os mesmos parâmetros que o addEventListener.

elemento.removeEventListener('click', funcao);

Funções inline x `addEventListener`

Você também pode adicionar manipuladores de eventos diretamente no HTML usando atributos como onclick, mas a prática recomendada é usar o addEventListener, pois é mais flexível e separa a lógica JavaScript do HTML, tornando o código mais fácil de manter.

Outros eventos

Manipuladores de eventos em Javascript servem para interfacear um script com atividades do sistema ou ações do usuário. Eles são divididos em 2 categorias: eventos de sistema e eventos de mouse.

Os eventos de sistema disponíveis são: OnLoad e OnUnload. Eles não exigem a interação do usuário para serem ativados.

Os eventos de mouse disponíveis são: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver. Eles exigem a interação do usuário (através do mouse ou não) para serem ativados.

Exemplos de eventos de sistema:

Evento OnLoad

Este evento é ativado após a página HTML ser completamente carregada. Ele pode ser associado às tags <BODY> ou <FRAMESET>:

<html>
 <head>
  <script language="Javascript">
  function chegada() {
   window.alert("Seja bem-vindo ao nosso site!");
   }
  </script>
 </head>
<body OnLoad="chegada()">
Veja que interessante a utilização do evento <I>OnLoad</I>.
</body>
</html>

Evento OnUnload

Este evento é ativado após a página HTML ser abandonada (seja através do clique sobre algum link, ou sobre os botões de avanço/retrocesso do browser). Ele pode ser associado às tags<BODY> ou <FRAMESET>:

<html>
 <head>
  <script language="Javascript">
   function saida() {
   window.alert("Volte sempre!");
  }
 </script>
</head>
<body OnUnload="saida()">
Veja que interessante a utilização do evento <I>OnUnLoad</I>.
</body>
</html>

Exemplos de eventos de mouse:

Evento OnClick

O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é ativado sempre que se dá um clique sobre um objeto que aceita evento de clique de mouse.

Objetos que aceitam um evento OnClick são links, caixas de verificação e botões:

<html>
 <head>
  <script language="Javascript">
   function mensagem() {
   window.alert("Você clicou neste campo!");
  }
 </script>
</head>
<body>
 <a href="exemplo.html" OnClick="mensagem()">
 <i>Link</i> comum</a><br>
 <form>
  <input type="radio" OnClick="mensagem()"><i>Radio</i>
  <br>
  <input type="checkbox" OnClick="mensagem()"><i>Checkbox</i>
  <br>
  <input type="reset" OnClick="mensagem()">
  <br>
  <input type="submit" OnClick="mensagem()">
  <br>
 </form>
</body>
</html>

Evento OnFocus

O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usuário clicar ou alternar para um objeto específico na página.

Este evento pode ser associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>):

<html>
<head>
<script language="Javascript">
function foco() {
   window.alert("O campo E-mail está em foco!");
}
</script>
</head>
 <body>
  <form>
   Nome: <input name="nome" type="text"><br>
   Email: <input name="email" type="text" OnFocus="foco()"><br>
   Telefone: <input name="telefone" type="text">
 </form></body>
</html>

Muitas vezes, os dados que são inseridos em um formulário precisam ser separados, analisados, manipulados ou verificados quanto a erros antes de serem transmitidos para o servidor.

O evento OnSubmit permite a captura e, se necessário, a interrupção do envio dos dados de um formulário. Isto é realizado chamando-se a função a partir do manipulador OnSubmit, fazendo com que ela retorne verdadeiro ou falso.

Se a função associada ao manipulador retornar falso, os dados do formulário não serão enviados. Esta funcionalidade pode ser verificada a partir do código a seguir:

<html>
<head>
<script language="Javascript">
function submete() {
if (document.form1.campo1.value == "" ||
    document.form1.campo2.value == "") {
          return false;
}
 else {
          return true;
}
}
</script>
</head>
<body bgcolor=white link=blue vlink=blue alink=blue>
 <form name=form action="exemplo.html" 
      OnSubmit="return submete()">
  Campo 1: <input type="text" size=10 name=campo1>
  <br>
  Campo 2: <input type="text" size=10 name=campo2>
  <p>
  <input type=submit>
 </form>
</body>
</html>

Manipuladores de eventos são ferramentas poderosas em JavaScript que permitem criar interações dinâmicas nas suas páginas. Com a prática, você vai aprender a usar eventos para melhorar a experiência do usuário e tornar suas páginas mais interativas.

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

Dúvidas ou sugestões sobre manipuladores de eventos em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits