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.
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:
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
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários