Eventos: reagindo ao usuário
Selecionar e mudar é metade da história. A outra metade é QUANDO mudar: eventos fazem a página responder a cliques, teclas e tudo o que o usuário fizer.
Estudar esta lição interativa →Na lição passada, o JavaScript mexeu na página, mas mexeu uma vez só, assim que ela carregou. Um site interativo é outra coisa: ele fica esperando o usuário agir e reage na hora. O clique no curtir, a tecla digitada na busca, o envio do formulário. Cada uma dessas ações é um evento: algo que acontece na página, num momento que você não controla, porque quem decide é o usuário.
O seu papel como programador vira, então, deixar instruções prontas: "quando este botão for clicado, execute esta função". É exatamente isso que o addEventListener faz (em inglês, "adicionar um ouvinte de evento"). Você o chama no elemento-alvo, dizendo qual evento escutar e o que fazer quando ele acontecer:
As partes do addEventListener: no alvo (botao), peça para escutar ("addEventListener"), diga qual evento ("click") e entregue a função que deve rodar toda vez que ele acontecer.
Repare no detalhe: o que você entrega é a função em si, e é comum ela ser uma arrow escrita ali mesmo. Ela não roda na hora; fica guardada, e o navegador a chama toda vez que o evento acontecer. Veja no contador abaixo: a variável cliques vive fora da função, e a cada clique a função roda de novo, soma 1 e atualiza o placar. Clique algumas vezes no botão do resultado:
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique no botão do resultado e veja o contador subir.
E o clique é só o começo. Cada coisa que o usuário faz tem um evento com nome próprio, e o addEventListener escuta qualquer um deles. Os que você mais vai usar:
Clique
"click"O mais famoso: dispara quando o elemento é clicado (ou tocado, no celular).
Digitação
"input"Dispara toda vez que o valor de um campo muda (ao digitar, apagar, colar ou escolher uma sugestão). É o motor das buscas que filtram enquanto você escreve.
Tecla pressionada
"keydown"Dispara ao apertar qualquer tecla, e dá para saber qual. Clássico: reagir ao Enter.
Envio de formulário
"submit"Dispara quando um formulário é enviado. É onde se valida antes de mandar.
Para sentir o input funcionando, o exemplo abaixo combina os dois aprendizados da lição anterior: lê o .value do campo (o que foi digitado até agora) e escreve no .textContent do título a cada mudança do valor (cada letra digitada ou apagada). Digite seu nome no campo do resultado e veja a página acompanhar em tempo real:
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Digite no campo do resultado e veja a saudação mudar.
Ao passar uma função com nome para o addEventListener, escreva botao.addEventListener("click", fazerAlgo), sem parênteses no fazerAlgo. Com parênteses (fazerAlgo()), você executa a função naquele instante e entrega só o resultado dela ao ouvinte, e aí nada acontece no clique. É um dos bugs mais clássicos de quem está começando com eventos: você quer entregar a receita, não o bolo pronto.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete o botão de curtir e clique em Rodar.