Eventos: onclick, onchange, onmouseover e mais no JavaScript

abril 18, 2026

Eventos: onclick, onchange, onmouseover e mais no JavaScript

Bem-vindo(a) ao post no blog.

🧠 O que são Eventos

Um evento é qualquer ação detectada pelo navegador — algo que acontece na página e que o JavaScript pode perceber e reagir.

💡 Exemplos de eventos comuns:

● O usuário clicar em um botão (click);

● Passar o mouse sobre um elemento (mouseover);

● Digitar em um campo (keydown);

● Mudar o valor de um input (change);

● Enviar um formulário (submit);

● Carregar a página (load).

💬 Cada ação dispara um evento, e podemos programar o JavaScript para responder a ele.

⚙️ Tipos de Eventos Mais Usados

Tipo de evento	Ação detectada
onclick	Quando o elemento é clicado
ondblclick	Clique duplo
onmouseover	Quando o mouse passa sobre o elemento
onmouseout	Quando o mouse sai do elemento
onchange	Quando o valor de um campo muda (inputs, selects etc.)
onkeydown	Quando uma tecla é pressionada
onkeyup	Quando o usuário solta uma tecla
onload	Quando a página termina de carregar
onsubmit	Quando um formulário é enviado

Dica: Cuidado para não abusar do onmouseover. Se tudo no seu site começar a brilhar ou se mexer só de passar o mouse, a experiência do usuário pode ficar cansativa. Use a interatividade para guiar o visitante, não para confundi-lo!

🧩 Maneiras de Ligar JavaScript aos Eventos

Existem três formas de associar eventos ao JavaScript:

🟢 1. Método Inline (HTML direto)

Você usa o evento dentro da própria tag HTML.
Exemplo:

<button onclick="alert('Botão clicado!')">Clique aqui</button>

💬 Simples e rápido, mas não recomendado em projetos grandes, pois mistura lógica (JS) com estrutura (HTML).

🟠 2. Método Interno (Atributo chamando função)

Usando HTML para chamar uma função JavaScript declarada no <script>.

<button onclick="mostrarMensagem()">Clique</button>

function mostrarMensagem() {

alert("Você clicou no botão!");

}

</script>

💡 Melhora a organização, pois a lógica está separada da interface.

🔵 3. Método Externo (via DOM / JavaScript puro)

Usando o modelo de objeto do documento (DOM) para adicionar eventos pelo código JS, sem tocar no HTML.

<button id="botao">Clique aqui</button>

const botao = document.getElementById("botao");

botao.addEventListener("click", function() {

alert("Evento adicionado pelo JavaScript!");

});

</script>

✅ Vantagem: é o método mais profissional e recomendado, pois separa completamente o código da estrutura visual do HTML.

💬 Exemplo Prático — Evento de Clique

<!DOCTYPE html>

<head>

<title>Evento Click</title>

</head>

<body>

<button id="btnMensagem">Clique em mim!</button>

const botao = document.getElementById("btnMensagem");

botao.addEventListener("click", () => {

alert("Botão clicado com sucesso!");

});

</script>

</body>

</html>

Resultado:
Ao clicar no botão, aparece uma caixa de mensagem (alerta). 🎉

🧮 Eventos de Mouse

Vamos ver alguns eventos clássicos do mouse em ação.

Exemplo – onmouseover e onmouseout

<div id="caixa"

style="width:200px;height:200px;background-color:lightblue;text-align:center;line-height:200px;">

Passe o mouse

</div>

const caixa = document.getElementById("caixa");

caixa.addEventListener("mouseover", function() {

caixa.style.backgroundColor = "lightgreen";

caixa.textContent = "Mouse sobre mim!";

});

caixa.addEventListener("mouseout", function() {

caixa.style.backgroundColor = "lightblue";

caixa.textContent = "Mouse saiu!";

});

</script>

💬 Ao passar o mouse sobre o quadrado, a cor e o texto mudam.
Quando o mouse sai, tudo volta ao normal.

🧩 Evento onchange (mudança de valor)

O evento onchange é muito usado em caixas de seleção ou campos de texto.

Exemplo — Lista com Reação Automática

<option value="">Selecione uma cor</option>

<option value="red">Vermelho</option>

<option value="green">Verde</option>

</select>

const select = document.getElementById("cores");

const area = document.getElementById("area");

select.addEventListener("change", () => {

let corEscolhida = select.value;

area.style.backgroundColor = corEscolhida;

});

</script>

💡 Assim que o usuário troca de cor, a área muda automaticamente!

⚡ Eventos de Teclado

O JavaScript pode detectar teclas pressionadas, o que é essencial em formulários, jogos e validações.

Evento	Quando ocorre
keydown	Quando a tecla é pressionada
keyup	Quando a tecla é solta
keypress	Durante a digitação (não recomendado em versões modernas)

Exemplo:

const campo = document.getElementById("campoTexto");

campo.addEventListener("keydown", function() {

console.log("Tecla pressionada!");

});

campo.addEventListener("keyup", function() {

console.log(`Você digitou: ${campo.value}`);

});

</script>

💬 Enquanto o usuário digita, o console exibe o conteúdo do campo.

🔁 Evento onsubmit (Formulário)

Permite interceptar o envio de um formulário e agir antes do envio (por exemplo, validar dados).

<button type="submit">Entrar</button>

</form>

const form = document.getElementById("formLogin");

form.addEventListener("submit", function(evento) {

evento.preventDefault(); // impede envio automático

const usuario = document.getElementById("usuario").value;

const senha = document.getElementById("senha").value;

if (usuario === "" || senha === "") {

alert("Preencha todos os campos!");

} else {

alert(`Bem-vindo, ${usuario}!`);

}

});

</script>

💡 O método .preventDefault() evita que a página recarregue automaticamente — fundamental para validações personalizadas.

🧲 Outros Eventos Úteis

Evento	Descrição	Aplicação comum
onload	Quando a página termina de carregar	Exibir mensagem inicial
onfocus	Quando um campo recebe foco	Destacar input ativo
onblur	Quando o campo perde foco	Validar após digitação
onresize	Quando a janela é redimensionada	Layout responsivo
onscroll	Ao rolar a página	Cabeçalho fixo, animações

💡 Exemplo com onload:

<h1>Bem-vindo!</h1>

</body>

💻 Exercício Prático Contador com Eventos

Crie um contador que aumenta e diminui ao clicar em botões.

<h2>Contador: <span id="numero">0</span></h2>

let contagem = 0;

const numero = document.getElementById("numero");

document.getElementById("btnMais").addEventListener("click", () => {

contagem++;

numero.textContent = contagem;

});

document.getElementById("btnMenos").addEventListener("click", () => {

contagem--;

numero.textContent = contagem;

});

</script>

💬 Um exemplo simples, mas poderoso: você cria interatividade em tempo real com o usuário.

🧮 Desafio Extra Alterar Tema com Evento

Crie um botão que alterna entre modo claro e escuro.

💡 Exemplo:

<button id="tema">Alternar Tema</button>

const corpo = document.body;

const botao = document.getElementById("tema");

botao.addEventListener("click", () => {

corpo.classList.toggle("dark");

});

</script>

<style>

body { background: white; color: black; transition: 0.5s; }

body.dark { background: black; color: white; }

</style>

✅ Cada clique alterna o tema do site.
classList.toggle() adiciona ou remove automaticamente a classe .dark.

🧠 Hoje você aprendeu:

✔ O que são eventos e por que são fundamentais para interatividade;
✔ Como capturar ações como click, change, keydown, submit;
✔ Três formas de adicionar eventos (inline, com função, via DOM);
✔ Como usar addEventListener(), a forma moderna e recomendada;
✔ Criou exemplos com botões, formulários e teclas;
✔ E aplicou tudo em projetos e desafios práticos.

🎓 Conclusão

Agora o JavaScript sente o que o usuário faz!
Você aprendeu a capturar ações e reagir dinamicamente a interações, o que é fundamental para criar experiências reais de navegação.

Na próxima aula, você vai aprender a manipular o DOM (Document Object Model) — ou seja, como acessar, criar e modificar elementos HTML diretamente com o JavaScript.

Você está prestes a ter controle total sobre o conteúdo da página! 🧩✨

Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.

Se esse conteúdo te ajudou, você pode me pagar um café ☕

Pix: antropologiacrista@gmail.com

Pesquisar este blog

Academy Code Christ