JavaScript Academy · Aula

Eventos personalizados

Crie e despache seus próprios eventos.

Eventos personalizados é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 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.

Além dos Eventos Integrados

O DOM permite criar e despachar seus próprios eventos com CustomEvent. Isso desacopla partes do aplicativo: um componente anuncia que algo aconteceu, e os outros escutam sem precisar de uma referência direta.

Criando um CustomEvent

Crie um usando new CustomEvent(name, options). O nome pode ser qualquer texto que você escolher.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Despachando o Evento

Dispare o evento em um alvo com dispatchEvent. Qualquer ouvinte registrado para esse nome no alvo (ou em um ancestral, se houver borbulhamento) é executado.

element.dispatchEvent(new CustomEvent("cart:add"));

Escutando o Evento

Escute exatamente como faria com um evento nativo, usando addEventListener com seu nome personalizado.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Passando Dados com Detalhes

Anexe uma carga útil por meio da propriedade detail. Os ouvintes leem esse valor em event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Lendo os Dados Enviados

Dentro do ouvinte, event.detail contém tudo o que você passou. Pode ser qualquer valor: um objeto, um array, um texto ou um número.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Fazendo o Evento Borbulhar

Por padrão, os eventos personalizados têm NOT, ou seja, não fazem borbulhamento. Defina bubbles: true para que os ancestrais e os ouvintes delegados possam ouvi-los.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

A Opção de Cancelamento

Defina cancelable: true para permitir que os ouvintes chamem preventDefault(). O código que despacha o evento verifica o valor retornado por dispatchEvent para saber se ele foi cancelado.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Um Padrão de Desacoplamento

Os eventos personalizados permitem que os módulos se comuniquem sem importar uns aos outros. Um registrador ou uma camada de análise pode escutar em document eventos que abrangem todo o aplicativo.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Convenções de Nomenclatura

Organize os nomes dos eventos em namespaces (como cart:add e user:login) para evitar conflitos com eventos nativos e agrupar claramente os eventos relacionados.

Sintaxe Antiga e Nova

Você pode encontrar a API antiga document.createEvent em código mais velho. Prefira o construtor moderno new CustomEvent(...); ele é mais simples e é a única forma que você deve escrever atualmente.

const evt = new CustomEvent("ready", { detail: 1 });

Verificação Rápida

Verificação de conhecimentos sobre eventos personalizados.

Recapitulação

Use new CustomEvent(name, { detail, bubbles, cancelable }) e dispatchEvent para criar seus próprios eventos. Leia os dados enviados por meio de event.detail, opte pelo borbulhamento para usar a delegação e use cancelable para ações que possam ser impedidas. Os eventos personalizados desacoplam os componentes em um estilo limpo de publicação e assinatura.

Perguntas Frequentes

A aula “Eventos personalizados” é grátis?

Sim — o texto completo de “Eventos personalizados” é 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 “Eventos personalizados”?

Crie e despache seus próprios 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 4 de 4.

Quanto tempo leva a aula “Eventos personalizados”?

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