Como Usar addEventListener na Prática é um dos assuntos que mais ajudam quem está começando em JavaScript, programação, iniciante e quer construir páginas que realmente reagem ao usuário. Se você sempre quis fazer um botão mostrar uma mensagem, mudar um texto ou fazer algo acontecer só quando a pessoa clicar, hoje você finalmente vai entender como isso funciona — e de um jeito simples, humano e direto ao ponto.

Aqui você vai aprender passo a passo, com explicações detalhadas e muitos exemplos. Mesmo que você esteja dando seus primeiros passos, eu prometo: você vai conseguir acompanhar tudo.

Antes de começar, crie dois arquivos na mesma pasta:

  • index.html
  • script.js

Se você não sabe como fazer isso, veja:
https://vivendodeprogramacao.com.br/como-criar-arquivo-html-basico
https://vivendodeprogramacao.com.br/como-separar-o-javascript-do-html

Salve, abra o arquivo no navegador… e vamos começar essa jornada!

O que é um evento e por que isso importa

Vamos imaginar uma cena da vida real:
Você está numa sala cheia de interruptores. Cada interruptor acende uma luz diferente.

Agora pense na página web:

  • Cada botão
  • Cada campo de texto
  • Cada formulário
  • Até o próprio documento

…funcionam como interruptores.
Eles reagem quando alguém interage com eles.

Um evento é exatamente isso:
Algo que acontece na página e que o JavaScript pode “perceber”.

Alguns exemplos de eventos:

  • clicar em um botão
  • digitar algo
  • enviar um formulário
  • mover o mouse
  • carregar a página

Quando você usa addEventListener, está dizendo o seguinte:

"JavaScript, quando esse evento acontecer nesse elemento, execute esse código."

Simples assim.

Por que não usar onclick?

É comum iniciantes começarem assim:

<button onclick="alert('Clicou!')">Clique</button>

O problema é que isso:

  • mistura JavaScript com HTML
  • deixa o código bagunçado quando cresce
  • só permite um evento por elemento

Agora veja a forma recomendada:

Arquivo index.html

<button id="btn">Clique</button>
<script src="script.js"></script>

Arquivo script.js

const botao = document.getElementById('btn');

botao.addEventListener('click', () => {
  alert('Clicou!');
});

E aqui já entra uma explicação MUITO importante para iniciantes:

O que significa essa linha?

const botao = document.getElementById('btn');

Ela não cria um novo botão.
Ela pega o botão que já existe no HTML e guarda dentro da variável botao.

Ou seja:

Agora a variável botao representa o botão na tela.

E isso aqui:

botao.addEventListener('click', () => {
  alert('Clicou!');
});

Significa:

“Quando alguém clicar no botão, execute essa função.”

Essa clareza é fundamental pra quem está começando.

Como funciona a sintaxe do addEventListener

A estrutura é sempre assim:

elemento.addEventListener('evento', funcao);

Traduzindo em português claro:

“Ouve este evento neste elemento e, quando acontecer, execute esta função.”

Eventos mais usados

Aqui estão os mais simples e úteis:

1. click — quando a pessoa clica no elemento

botao.addEventListener('click', () => {
  console.log('Botão clicado!');
});

2. input — quando alguém digita no campo

 
const nome = document.getElementById('nome');

nome.addEventListener('input', () => {
  console.log('Valor atual:', nome.value);
});

Explicando:

document.getElementById('nome') pega o campo

.value pega o texto digitado

o evento input dispara a cada letra digitada

3. submit — quando o formulário é enviado

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Formulário enviado!');
});

Aqui temos um detalhe:

event.preventDefault() impede que a página recarregue automaticamente, permitindo testar.

4. keydown — quando qualquer tecla é pressionada

document.addEventListener('keydown', (event) => {
  console.log(event.key);
});

Útil para atalhos de teclado e busca em tempo real.

5. DOMContentLoaded — quando o HTML termina de carregar

document.addEventListener('DOMContentLoaded', () => {
  console.log('Página pronta!');
});

Usado para garantir que os elementos existam antes do JavaScript tentar acessá-los.

O que é o “event”?

Quando você escreve:

botao.addEventListener('click', (event) => {
  console.log(event);
});

O event é simplesmente um objeto que contém informações sobre o que acabou de acontecer.

Como:

  • que tipo de evento foi (event.type)
  • quem recebeu o clique (event.target)
  • como cancelar o comportamento padrão (event.preventDefault())

Para um iniciante, basta saber:

O event é um pacote de informações úteis sobre a ação do usuário.

Funções dentro do addEventListener

Você pode usar:

Função anônima

botao.addEventListener('click', () => {
  console.log('Clicou');
});

Função separada (ideal quando o código cresce)

function mostrarMensagem() {
  alert('Olá!');
}

botao.addEventListener('click', mostrarMensagem);

Se quiser aprender mais sobre funções:
https://vivendodeprogramacao.com.br/como-usar-funcoes-javascript

Como adicionar eventos a vários elementos de uma vez

Imagine que você tem três botões:

<button class="acao">Botão 1</button>
<button class="acao">Botão 2</button>
<button class="acao">Botão 3</button>

JavaScript:

const botoes = document.querySelectorAll('.acao');

botoes.forEach((btn) => {
  btn.addEventListener('click', () => {
    console.log('Você clicou em:', btn.textContent);
  });
});

Explicando:

querySelectorAll pega todos os elementos da classe .acao

forEach percorre cada um

adicionamos um evento individual em cada um

Prático e muito poderoso.

Propagação de eventos (bem básico)

Quando você clica em algo, o evento também dispara nos elementos “pais”, subindo na árvore do HTML.

Se isso te atrapalhar, você pode parar:

event.stopPropagation();

Só isso.
Sem aprofundar agora para não complicar.

Como remover um event listener

Exemplo:

function clique() {
  console.log('Clicou');
}

botao.addEventListener('click', clique);

// Para remover:
botao.removeEventListener('click', clique);

Duas regras importantes:

A função precisa ter um nome

Precisa ser a mesma função usada no addEventListener

Boas práticas para iniciantes

  • Separe HTML e JavaScript sempre que puder
  • Nomeie elementos de forma clara e simples
  • Use console.log() para entender o que está acontecendo
  • Escreva funções pequenas e fáceis de ler
  • Recarregue a página sempre que alterar o código
  • Teste, mude, mexa, explore — isso faz você aprender de verdade

Conclusão

Agora que você aprendeu Como Usar addEventListener na Prática, você já pode criar páginas mais inteligentes, interativas e divertidas. O seu JavaScript agora é capaz de “escutar” o usuário e reagir em tempo real. Isso, por si só, já abre as portas para um mundo gigantesco de possibilidades!

A melhor forma de aprender é simples: pratique.
Crie botões, faça testes, tente mudar os exemplos.
Programação é como aprender um instrumento: quanto mais você toca, melhor você fica.

Continue explorando, continue criando e lembre-se: você está evoluindo a cada linha de código que escreve.

Dúvidas Frequentes sobre addEventListener

1. O que exatamente o addEventListener faz?
Ele “ouve” um evento acontecendo em um elemento da página e executa uma função quando isso acontece. É como colocar um segurança na porta: quando alguém chegar, ele toma uma atitude.

 

2. Qual a diferença entre onclick e addEventListener?
onclick só aceita um único evento por vez e mistura HTML com JavaScript.
addEventListener mantém o código organizado, permite vários eventos no mesmo elemento e segue as boas práticas modernas.

 

3. O que significa essa linha: const botao = document.getElementById('btn')?
Significa que o JavaScript está “pegando” o botão que tem o ID btn no HTML e guardando dentro da variável botao. A partir desse momento, tudo que você fizer com botao vai afetar o elemento da página.

 

4. Preciso criar a função separada ou posso colocar direto no addEventListener?
As duas formas funcionam. Para códigos pequenos, a função direta facilita. Para códigos maiores, criar uma função separada deixa tudo mais organizado e fácil de entender.

 

5. O que é esse tal de event que aparece nas funções?
É um objeto que traz informações sobre o que acabou de acontecer. Por exemplo: qual tecla foi pressionada, quem foi clicado, que tipo de evento disparou. É como um “relatório” sobre a ação do usuário.

 

6. Posso usar addEventListener em vários botões de uma vez?
Sim! Basta usar querySelectorAll e um forEach para adicionar o evento em cada um dos elementos encontrados.

 

7. O que é propagação de eventos?
Quando você clica em um elemento, o evento “sobe” para os elementos que estão ao redor dele. Se isso atrapalhar, basta usar event.stopPropagation() para parar esse efeito.

 

8. Como faço para remover um addEventListener?
Você precisa usar removeEventListener com a mesma função que colocou antes. Ou seja, a função precisa ter nome e ser a mesma referência usada no início.

 

9. Tudo precisa estar dentro do DOMContentLoaded?
Não obrigatoriamente. Você só precisa usar o evento DOMContentLoaded quando o seu JavaScript é executado antes do HTML existir. No geral, colocar o script no final do body já resolve isso.

 

10. Como eu sei qual evento usar em cada situação?
Você escolhe o evento baseado no que quer detectar. Por exemplo:

  • clique → click
  • digitação → input ou keydown
  • envio de form → submit
  • carregamento do HTML → DOMContentLoaded


Com o tempo isso se torna natural.

 

11. addEventListener funciona em todos os navegadores?
Sim, funciona em praticamente todos os navegadores modernos e até antigos. É totalmente seguro de usar.

 

12. Preciso recarregar a página toda vez que alterar o JavaScript?
Sim, sempre. O navegador só executa o código que está carregado. Sempre que você fizer uma mudança, salve e recarregue a página no navegador.