By Como Usar Eventos em JavaScript
Os eventos em javascript são peças fundamentais no desenvolvimento web, permitindo que páginas interajam dinamicamente com os usuários. Os eventos são tratados através do DOM (Document Object Model), proporcionando uma maneira eficaz de responder a ações do usuário, como cliques, teclas pressionadas e movimentos do mouse. Neste artigo, vamos aprender a usar eventos em JavaScript, com exemplos práticos.
Acesse também: Como Fazer e Tratar Requisições com o Fetch API em JavaScript
O que são Eventos em JavaScript?
Em termos simples, eventos são ações ou ocorrências que acontecem em uma página web e que podem ser detectadas e tratadas por JavaScript. Essas ações podem incluir cliques de mouse, pressionamento de teclas, carregamento da página, redimensionamento da janela e muitas outras interações do usuário.
Como os Eventos Funcionam no DOM?
No DOM, cada elemento HTML é considerado um “nó“, e eventos podem ocorrer em diferentes tipos de nós. JavaScript permite que você “ouça” esses eventos e execute códigos específicos quando eles ocorrem. O processo de detectar e responder a eventos envolve três fases principais:
- Captura (capturing): O evento é capturado durante a fase de propagação, descendo do elemento pai até o elemento de destino.
- Alvo (target): O evento atinge o elemento de destino, onde o código associado ao evento é executado.
- Propagação (bubbling): O evento se propaga de volta para cima na árvore DOM, passando pelos elementos pais.
Exemplo Prático: Trabalhando com o Evento de Clique
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventos em JavaScript</title>
<style>
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="meuBotao">Clique-me</button>
<script>
// Capturando o elemento botão
const botao = document.getElementById('meuBotao');
// Adicionando um ouvinte de evento de clique
botao.addEventListener('click', function() {
alert('Você clicou no botão!');
});
</script>
</body>
</html>Neste exemplo, um botão é criado no HTML, e em seguida, com JavaScript, o evento (addEventListener) é usado para escutar o evento de clique no botão. Quando o botão é clicado, a mensagem de alerta ‘Você clicou no botão!’ é exibida na tela.
Tipos Comuns de Eventos em JavaScript:
Eventos de Mouse:
click: Clique do mouse.mouseover: Mouse passa sobre um elemento.mouseout: Mouse sai de um elemento.
// Adicionando um ouvinte de evento de passar o mouse
botao.addEventListener('mouseover', function() {
alert('Ouvimos o evento!');
});
// Adicionando um ouvinte de evento de tirar o mouse de cima
botao.addEventListener('mouseout', function() {
alert('Ouvimos o evento!');
});Eventos de Teclado:
keydown: Tecla do teclado pressionada.keyup: Tecla do teclado liberada.
// Adicionando um ouvinte de evento de passar o mouse
botao.addEventListener('keydown', function() {
alert('Uma tecla foi pressionada!');
});
// Adicionando um ouvinte de evento de tirar o mouse de cima
botao.addEventListener('keyup', function() {
alert('A tecla foi liberada');
});Eventos de Formulário:
submit: Envio de formulário.change: Valor de um elemento de formulário muda.
// Adicionando um ouvinte de evento de passar o mouse
botao.addEventListener('submit', function() {
alert('Formulário enviado com sucesso!');
});
// Adicionando um ouvinte de evento de tirar o mouse de cima
botao.addEventListener('change', function() {
alert('Valor alterado com sucesso!');
});Eventos de Documento:
DOMContentLoaded: Documento totalmente carregado e analisado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo DOMContentLoaded</title>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Este código será executado assim que o DOM for completamente carregado
console.log('O DOM foi completamente carregado.');
// Exemplo: Alterando o conteúdo de um elemento após o carregamento do DOM
const meuParagrafo = document.getElementById('meuParagrafo');
meuParagrafo.textContent = 'Conteúdo alterado após o carregamento do DOM!';
});
</script>
<!-- Conteúdo da página -->
<h1>Exemplo DOMContentLoaded</h1>
<p id="meuParagrafo">Este é um parágrafo de exemplo.</p>
</body>
</html>Neste exemplo, o evento DOMContentLoaded é utilizado para aguardar o carregamento completo do DOM antes de executar o código JavaScript. O conteúdo do parágrafo com o ID meuParagrafo é alterado dinamicamente após o carregamento do DOM.
Manipulando Eventos de Forma Avançada:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventos Avançados em JavaScript</title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="meuElemento">Clique-me</div>
<script>
const elemento = document.getElementById('meuElemento');
// Adicionando ouvintes para eventos de clique e hover
elemento.addEventListener('click', function() {
alert('Você clicou no elemento!');
});
elemento.addEventListener('mouseover', function() {
this.style.backgroundColor = 'lightcoral';
});
elemento.addEventListener('mouseout', function() {
this.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>Neste exemplo, um elemento <div> é criado no HTML, e eventos de clique, mouseover e mouseout são tratados usando ouvintes de evento. Quando o elemento é clicado, uma mensagem de alerta é exibida, e as cores de fundo mudam quando o mouse passa sobre o elemento ou sai dele.
Interatividade das Páginas com Eventos
Os eventos em JavaScript são a espinha dorsal da interatividade nas páginas web. Ao entender o que são e como funcionam no DOM, os desenvolvedores podem criar experiências web dinâmicas e envolventes. Explore os diferentes tipos de eventos, além dos exemplos já fornecidos no decorrer do artigo, tente esses também.
