Este README funciona como um guia de referencia sobre eventos no JavaScript. O objetivo e entender como o navegador detecta interacoes e como o codigo reage a elas para atualizar a interface.
Ao final desta leitura, voce deve conseguir:
addEventListener();event de forma correta;target de currentTarget;preventDefault() e stopPropagation();Em JavaScript, um evento e um acontecimento detectado pelo navegador. Esse acontecimento pode ser provocado pelo usuario, pelo carregamento do documento ou por mudancas no proprio ambiente da pagina.
Exemplos comuns:
A programacao orientada a eventos existe para que o codigo seja executado no momento em que algo acontece, em vez de rodar sem motivo o tempo todo.
Quase todo uso de eventos segue este fluxo:
addEventListener().Exemplo minimo:
const botao = document.querySelector('button');
function clicarNoBotao() {
botao.textContent = 'Fui clicado';
}
botao.addEventListener('click', clicarNoBotao);
Neste exemplo:
botao e o elemento observado;click e o tipo do evento;clicarNoBotao e a funcao tratadora;addEventListener() conecta o acontecimento a resposta.addEventListener()addEventListener() e a forma mais recomendada de associar eventos a elementos.
Sintaxe basica:
elemento.addEventListener('nomeDoEvento', funcao);
Exemplo com funcao nomeada:
const botao = document.querySelector('#btn-enviar');
function exibirMensagem() {
console.log('Botao pressionado');
}
botao.addEventListener('click', exibirMensagem);
Exemplo com funcao anonima:
const botao = document.querySelector('#btn-enviar');
botao.addEventListener('click', function() {
console.log('Botao pressionado');
});
Exemplo com arrow function:
const botao = document.querySelector('#btn-enviar');
botao.addEventListener('click', () => {
console.log('Botao pressionado');
});
eventQuando um evento acontece, o navegador envia um objeto com informacoes sobre esse acontecimento. Esse objeto costuma ser chamado de event.
Exemplo:
const campo = document.querySelector('#nome');
campo.addEventListener('input', function(event) {
console.log(event.target.value);
});
Algumas propriedades importantes:
event.target: elemento onde o evento aconteceu;event.currentTarget: elemento que possui o tratador atual;event.type: nome do evento;event.key: tecla pressionada;event.clientX e event.clientY: coordenadas do mouse na janela.Exemplo com teclado:
document.body.addEventListener('keydown', function(event) {
console.log('Tecla pressionada:', event.key);
});
Sao eventos disparados por interacao com mouse, trackpad ou ponteiro.
click;dblclick;mousedown;mouseup;mouseenter;mouseleave;mousemove.Exemplo:
const caixa = document.querySelector('.caixa');
caixa.addEventListener('mouseenter', function() {
caixa.classList.add('ativa');
});
caixa.addEventListener('mouseleave', function() {
caixa.classList.remove('ativa');
});
Esse tipo de padrao aparece em efeitos visuais, menus e estados de destaque.
Esses eventos dependem do foco do documento ou do elemento correto.
keydown: dispara quando a tecla e pressionada;keyup: dispara quando a tecla e solta.keypress existiu por muito tempo, mas hoje e considerado obsoleto para varios cenarios. Em exemplos novos, prefira keydown e keyup.
Exemplo:
document.body.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
console.log('O usuario pressionou Enter');
}
});
Na pasta spaceship/, esse tipo de evento aparece no controle de movimento por teclado.
Sao comuns em input, textarea, select e form.
input;change;focus;blur;submit.Comparacao importante:
input dispara a cada alteracao do valor;change dispara quando a alteracao e concluida.Exemplo com input:
const campoNome = document.querySelector('#nome');
const saida = document.querySelector('#saida');
campoNome.addEventListener('input', function(event) {
saida.textContent = event.target.value;
});
Exemplo com submit:
const formulario = document.querySelector('form');
formulario.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Formulario interceptado pelo JavaScript');
});
Sao uteis para observar o estado geral do documento ou da janela.
DOMContentLoaded;load;resize;scroll.Exemplo:
document.addEventListener('DOMContentLoaded', function() {
console.log('O HTML foi carregado');
});
Comparacao importante:
DOMContentLoaded: dispara quando o HTML ja virou DOM;load: espera recursos adicionais, como imagens e outros arquivos.target e currentTargetEssa diferenca e central para entender a propagacao.
event.target: elemento original onde o evento ocorreu;event.currentTarget: elemento que esta executando o tratador atual.Exemplo conceitual:
<div id="card">
<button id="botao">Clique</button>
</div>
Se o clique do botao for tratado pela div, o target sera o botao e o currentTarget sera a div.
Isso faz diferenca quando voce quer saber exatamente em que ponto da arvore o evento comecou e em que ponto ele esta sendo tratado.
Quando um evento acontece, ele pode percorrer a arvore do DOM.
No uso mais comum da disciplina, o comportamento mais observado e o bubbling, em que o evento sobe do elemento mais interno para os elementos externos.
Exemplo:
const card = document.querySelector('#card');
const botao = document.querySelector('#botao');
card.addEventListener('click', function() {
console.log('Clique no card');
});
botao.addEventListener('click', function() {
console.log('Clique no botao');
});
Ao clicar no botao, o clique pode atingir o botao e depois subir ate o card.
Para interromper essa subida:
botao.addEventListener('click', function(event) {
event.stopPropagation();
});
Use isso com criterio. Interromper propagacao sem necessidade pode tornar o comportamento da interface mais dificil de entender.
preventDefault()Alguns elementos possuem comportamentos padrao do navegador.
Exemplos:
Quando queremos impedir esse comportamento padrao, usamos event.preventDefault().
Exemplo:
const link = document.querySelector('a');
link.addEventListener('click', function(event) {
event.preventDefault();
console.log('A navegacao foi bloqueada');
});
Regra pratica:
preventDefault() quando voce quiser substituir o comportamento do navegador por uma logica propria;Tambem e possivel remover um evento com removeEventListener().
Para isso, a funcao precisa existir como referencia reutilizavel.
const botao = document.querySelector('#btn-contador');
function exibirMensagem() {
console.log('Clique detectado');
}
botao.addEventListener('click', exibirMensagem);
botao.removeEventListener('click', exibirMensagem);
Isso e util quando uma interacao precisa ser ativada so em certos momentos.
Muitas vezes um evento existe para alterar a interface.
Voce pode fazer isso diretamente com style:
const imagem = document.querySelector('img');
imagem.addEventListener('click', function() {
imagem.style.width = '200px';
});
Mas, em geral, e mais organizado usar classes CSS:
const caixa = document.querySelector('.caixa');
caixa.addEventListener('click', function() {
caixa.classList.toggle('ativa');
});
Essa abordagem separa melhor comportamento e apresentacao.
As subpastas desta secao ajudam a enxergar os eventos em contextos diferentes:
clique-basic/: clique simples para alterar pontuacao e estado;clique/: clique com evolucao de estado e logica de progressao;spaceship/: teclado para controlar movimento na tela.Esses tres cenarios mostram que evento nao e so “clicar em botao”. Ele e a base de praticamente toda interacao de interface.
Se voce seleciona o elemento errado, o evento pode nunca disparar.
event quando ele e necessarioSem ele, voce nao consegue acessar propriedades como target, key ou chamar preventDefault().
preventDefault() sem precisarIsso pode bloquear comportamentos normais da interface sem motivo claro.
input com changeEles parecem parecidos, mas disparam em momentos diferentes.
stopPropagation() sem entender o fluxoIsso pode quebrar interacoes de componentes maiores.
addEventListener() em vez de atributos como onclick;preventDefault() e stopPropagation() com justificativa;Os pontos fundamentais sobre eventos sao:
addEventListener() liga um elemento a uma resposta em JavaScript;event carrega dados importantes sobre a interacao;target e currentTarget nao significam a mesma coisa;preventDefault() impede comportamentos padrao;stopPropagation() interrompe a subida do evento;Com esse repertorio, voce tera base suficiente para entender melhor DOM, formularios, validacoes e interfaces mais dinamicas.