Criação e Disparo de Eventos Personalizados
Projete e implemente eventos personalizados usando .trigger() e .on() para desacoplar componentes, criar um código mais limpo e permitir uma comunicação flexível entre diferentes partes da sua aplicação.
Criação e Disparo de Eventos Personalizados é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 3 de 3. 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 jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.
Introdução aos eventos personalizados
Boas-vindas! Nesta lição, você aprenderá a criar e gerenciar seus próprios eventos personalizados no jQuery. Essa é uma maneira poderosa de tornar seu código mais organizado e flexível.
Imagine os eventos personalizados como mensagens especiais que diferentes partes da sua aplicação web podem enviar e receber. Isso ajuda essas partes a se comunicarem sem estarem diretamente vinculadas.
Por que usar eventos personalizados?
Por que usar eventos personalizados? Eles ajudam a resolver um problema comum: o acoplamento forte. Quando os componentes estão fortemente acoplados, alterar uma parte do código pode interromper outra.
- Desacoplamento: Os componentes não precisam conhecer o funcionamento interno uns dos outros.
- Código mais limpo: A lógica relacionada a uma ação específica fica centralizada.
- Flexibilidade: É fácil adicionar ou remover ouvintes sem alterar o remetente.
O método .trigger()
Para “enviar” ou “disparar” um evento personalizado, usamos o método .trigger() do jQuery. Você o chama em um objeto jQuery, como um elemento ou document, e passa o nome do evento como uma string.
O nome do evento pode ser qualquer um que você escolher, como 'dataLoaded' ou 'itemAdded'.
Demonstração do disparo de um evento
Vamos ver .trigger() em ação. Dispararemos um evento personalizado chamado 'myCustomEvent' em um botão quando ele for clicado. Nada acontecerá ainda, pois ninguém está ouvindo!
<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>
<script>
$(document).ready(function() {
$('#triggerButton').on('click', function() {
// Fire our custom event on the button itself
$(this).trigger('myCustomEvent');
console.log('myCustomEvent triggered!');
});
});
</script>Ouvindo com .on()
Para “receber” ou “ouvir” um evento personalizado, usamos o conhecido método .on(). Assim como nos eventos integrados, como 'click', você especifica o nome do evento e uma função a ser executada quando ele for disparado.
Você pode ouvir no mesmo elemento que disparou o evento, em um elemento pai ou até no próprio document para eventos globais.
Exemplo de disparo e escuta
Agora, vamos usar .trigger() e .on() juntos. Clique no botão e você verá a mensagem aparecer, mostrando que nosso evento personalizado foi disparado e recebido!
<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>
<script>
$(document).ready(function() {
// 1. Listen for 'buttonClicked' on the button
$('#myButton').on('buttonClicked', function() {
$('#statusMessage').text('Status: Custom event received!');
});
// 2. When the button is clicked, trigger 'buttonClicked'
$('#myButton').on('click', function() {
$(this).trigger('buttonClicked');
});
});
</script>Passando dados com eventos
Os eventos personalizados são ainda mais úteis quando você pode passar dados junto com eles. Você pode enviar argumentos adicionais para .trigger() depois do nome do evento. Esses argumentos serão passados para a função manipuladora de eventos.
- O primeiro argumento no manipulador é sempre o objeto de evento.
- Os argumentos seguintes são os dados que você passou com
.trigger().
Demonstração de dados em eventos personalizados
Aqui, dispararemos um evento 'dataReady' e passaremos uma string e um objeto. O ouvinte receberá esses dados e os exibirá. É assim que os componentes compartilham informações!
<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>
<script>
$(document).ready(function() {
// Listen for 'dataReady' and extract the passed data
$(document).on('dataReady', function(event, message, details) {
const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`;
$('#output').html(outputText);
});
// When button clicked, trigger 'dataReady' with data
$('#loadData').on('click', function() {
const msg = 'Data successfully loaded!';
const data = { status: 'complete', item: 'report' };
$(document).trigger('dataReady', [msg, data]);
console.log('Data event triggered!');
});
});
</script>Desacoplamento para aplicações melhores
Usar eventos personalizados para comunicação ajuda a criar aplicações mais modulares e fáceis de manter. Imagine um componente de “carrinho de compras” e um componente de “exibição de produtos”.
- Quando um produto é adicionado, a “exibição de produtos” dispara
'productAdded'. - O componente “carrinho de compras” ouve
'productAdded'e se atualiza.
Nenhum dos componentes precisa conhecer os métodos internos do outro, apenas o contrato do evento.
Verifique sua compreensão
Quais das afirmações a seguir descrevem corretamente os benefícios ou o uso de eventos personalizados com .trigger() e .on()?
Revisão: eventos personalizados
Excelente trabalho! Você aprendeu a criar e gerenciar eventos personalizados no jQuery. Veja um resumo rápido:
- O que são: Eventos personalizados são mensagens definidas pelo usuário para os componentes da aplicação.
- Por quê: Eles promovem o desacoplamento, resultando em um código mais limpo e flexível.
- Como: Use
.trigger('eventName', [data])para disparar um evento. - Como: Use
.on('eventName', function(event, data) { ... })para ouvir um evento.
Dominar eventos personalizados é um passo importante para criar aplicações jQuery robustas e escaláveis!
Perguntas Frequentes
A aula “Criação e Disparo de Eventos Personalizados” é grátis?
Sim — o texto completo de “Criação e Disparo 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 jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.
O que vou aprender em “Criação e Disparo de Eventos Personalizados”?
Projete e implemente eventos personalizados usando .trigger() e .on() para desacoplar componentes, criar um código mais limpo e permitir uma comunicação flexível entre diferentes partes da sua aplica… Você pratica jQuery 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 jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery 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 3 de 3.
Quanto tempo leva a aula “Criação e Disparo de 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 jQuery Academy?
Sim. Cada aula de jQuery 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
- Implementação de Delegação de Eventos Robusta
- Interrupção da Propagação de Eventos
- Criação e Disparo de Eventos Personalizados