Trabalhando com Eventos em JavaScript
Descubra como trabalhar com eventos em JavaScript para tornar suas páginas web interativas. Aprenda a adicionar manipuladores de eventos como onclick, onchange, e addEventListener, com exemplos práticos.
Trabalhando com Eventos em JavaScript
Eventos são ações ou ocorrências que acontecem na página web e que podem ser capturadas e manipuladas usando JavaScript. Eles são fundamentais para criar páginas interativas, respondendo a ações do usuário como cliques, movimentos do mouse, entradas de teclado e muito mais. Neste post, vamos explorar o conceito de eventos e como adicionar manipuladores de eventos com onclick, onchange e addEventListener.
O Que São Eventos?
Eventos são mecanismos que permitem a execução de funções JavaScript em resposta a ações do usuário ou mudanças no estado da página. Eles podem ser acionados por diversas interações, como clicar em um botão, mover o mouse sobre um elemento, pressionar uma tecla, carregar a página, entre outros.
Adicionando Manipuladores de Eventos
Para responder a eventos, usamos manipuladores de eventos, que são funções executadas quando o evento ocorre. Existem várias formas de adicionar manipuladores de eventos em JavaScript.
onclick
O manipulador de evento onclick é usado para executar uma função quando um elemento é clicado. Veja um exemplo simples:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Eventos em JavaScript</title>
</head>
<body>
<button onclick="mostrarAlerta()">Clique aqui</button>
<script>
function mostrarAlerta() {
alert("Botão clicado!");
}
</script>
</body>
</html>
onchange
O manipulador de evento onchange é utilizado em elementos de formulário para detectar quando o valor de um campo muda. Vamos ver um exemplo com um campo de texto:
<input type="text" id="meuInput" onchange="mostrarValor()">
<script>
function mostrarValor() {
const valor = document.getElementById("meuInput").value;
alert("Valor alterado para: " + valor);
}
</script>
addEventListener
O método addEventListener é a forma mais flexível e recomendada para adicionar manipuladores de eventos. Ele permite adicionar múltiplos manipuladores para o mesmo evento sem sobrescrever os existentes. Aqui está um exemplo:
<button id="meuBotao">Clique aqui</button>
<script>
const botao = document.getElementById("meuBotao");
botao.addEventListener("click", () => {
alert("Botão clicado com addEventListener!");
});
</script>
Exemplos de Eventos Comuns
Vamos explorar alguns eventos comuns e como usá-los para criar interatividade na sua página web.
Evento de Clique
O evento de clique (click) é um dos mais usados. Ele é acionado quando o usuário clica em um elemento. Aqui está um exemplo de como alterar o texto de um parágrafo quando um botão é clicado:
<p id="meuParagrafo">Texto original</p>
<button id="meuBotao">Clique para mudar o texto</button>
<script>
const paragrafo = document.getElementById("meuParagrafo");
const botao = document.getElementById("meuBotao");
botao.addEventListener("click", () => {
paragrafo.textContent = "Texto alterado!";
});
</script>
Evento de Mudança
O evento de mudança (change) é útil para formularários, como vimos anteriormente. Vamos ver um exemplo com um seletor de opções (select):
<select id="meuSelect" onchange="mostrarOpcao()">
<option value="opcao1">Opção 1</option>
<option value="opcao2">Opção 2</option>
<option value="opcao3">Opção 3</option>
</select>
<script>
function mostrarOpcao() {
const select = document.getElementById("meuSelect");
const opcaoSelecionada = select.value;
alert("Você selecionou: " + opcaoSelecionada);
}
</script>
Evento de Movimento do Mouse
O evento de movimento do mouse (mousemove) pode ser usado para criar efeitos interativos, como alterar a posição de um elemento com base na posição do mouse:
<div id="caixa" style="width: 100px; height: 100px; background-color: blue;"></div>
<script>
const caixa = document.getElementById("caixa");
document.addEventListener("mousemove", (event) => {
caixa.style.left = event.pageX + "px";
caixa.style.top = event.pageY + "px";
});
</script>
Conclusão
Entender e trabalhar com eventos em JavaScript é essencial para criar páginas web interativas e responsivas. Ao aprender como adicionar manipuladores de eventos com onclick, onchange e addEventListener, você pode responder a ações do usuário e melhorar a experiência do usuário. Pratique esses conceitos e incorpore-os em seus projetos para criar interfaces dinâmicas e envolventes.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
