JavaScript Academy · Aula

Fundamentos do addEventListener

Associe manipuladores aos elementos para tratar eventos.

Fundamentos do addEventListener é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Respondendo a eventos

Os eventos permitem que seu código reaja a ações do usuário, como cliques, pressionamentos de teclas e envios de formulários. addEventListener é a forma padrão de se inscrever.

Sintaxe básica

Chame addEventListener com um nome de evento e uma função manipuladora. O manipulador é executado sempre que o evento ocorre.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Manipuladores nomeados

Você pode passar uma função nomeada. Isso mantém o código organizado e, principalmente, permite remover o ouvinte mais tarde.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Vários ouvintes

Ao contrário da propriedade onclick antiga, você pode associar vários ouvintes ao mesmo evento sem que um sobrescreva o outro.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Para parar de ouvir, chame removeEventListener usando o mesmo nome de evento e a mesma referência de função usados para adicioná-lo.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Funções anônimas não podem ser removidas

Uma função de seta inserida diretamente cria uma nova referência a cada vez, portanto não pode ser removida mais tarde. Use uma referência nomeada se precisar removê-la.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

A opção de execução única

Passar { once: true } remove automaticamente o ouvinte depois que ele é acionado uma única vez.

btn.addEventListener("click", init, { once: true });

A opção de captura

Por padrão, os ouvintes são executados durante a fase de propagação. { capture: true } faz com que sejam executados durante a fase de captura.

parent.addEventListener("click", handler, { capture: true });

A opção passiva

{ passive: true } promete que você não chamará preventDefault, permitindo que o navegador otimize o desempenho da rolagem.

window.addEventListener("scroll", onScroll, { passive: true });

A opção de sinal

Um sinal de AbortController permite remover um ou vários ouvintes por meio de um cancelamento, o que é útil para a limpeza.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this dentro dos manipuladores

Em um manipulador que usa uma função comum, this faz referência ao elemento ao qual o ouvinte está associado. Funções de seta não vinculam this novamente.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Verificação rápida

Teste as regras de remoção.

Recapitulação

addEventListener(type, handler, options) inscreve seu código em eventos e aceita vários ouvintes. Remova-os com removeEventListener usando a mesma referência; por isso, prefira funções nomeadas. Entre as opções úteis estão once, capture, passive e signal. Em manipuladores comuns, this é o elemento de destino.

Perguntas Frequentes

A aula “Fundamentos do addEventListener” é grátis?

Sim — o texto completo de “Fundamentos do addEventListener” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Fundamentos do addEventListener”?

Associe manipuladores aos elementos para tratar eventos. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Fundamentos do addEventListener”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy