Creazione e attivazione di eventi personalizzati
Progettare e implementare eventi personalizzati usando .trigger() e .on() per disaccoppiare i componenti, creare codice più ordinato e abilitare comunicazioni flessibili tra le diverse parti dell'applicazione.
Creazione e attivazione di eventi personalizzati è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Introduzione agli eventi personalizzati
Benvenuto! In questa lezione imparerà a creare e gestire i Suoi eventi personalizzati in jQuery. È un metodo potente per rendere il codice più organizzato e flessibile.
Consideri gli eventi personalizzati come messaggi speciali che diverse parti della Sua applicazione web possono inviare e ricevere. In questo modo possono comunicare senza essere direttamente collegate.
Perché utilizzare gli eventi personalizzati?
Perché utilizzare gli eventi personalizzati? Aiutano a risolvere un problema comune: il forte accoppiamento. Quando i componenti sono fortemente accoppiati, una modifica a una parte del codice potrebbe danneggiarne un'altra.
- Disaccoppiamento: i componenti non devono conoscere il funzionamento interno degli altri.
- Codice più pulito: la logica relativa a una specifica azione è centralizzata.
- Flessibilità: è possibile aggiungere o rimuovere facilmente listener senza modificare il «mittente».
Il metodo .trigger()
Per «inviare» o «attivare» un evento personalizzato, utilizziamo il metodo .trigger() di jQuery. Lo si chiama su un oggetto jQuery, ovvero un elemento o document, passando il nome dell'evento come stringa.
Il nome dell'evento può essere scelto liberamente, ad esempio 'dataLoaded' o 'itemAdded'.
Dimostrazione dell'attivazione di un evento
Vediamo .trigger() in azione. Attiveremo un evento personalizzato chiamato 'myCustomEvent' su un pulsante quando viene selezionato. Per ora non accadrà nulla, perché nessuno è in ascolto!
<!-- 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>Ascoltare con .on()
Per «ricevere» o «ascoltare» un evento personalizzato, utilizziamo il familiare metodo .on(). Come per gli eventi integrati, ad esempio 'click', si specificano il nome dell'evento e una funzione da eseguire quando l'evento viene attivato.
È possibile ascoltare sullo stesso elemento che ha attivato l'evento, su un elemento genitore o persino su document per gli eventi globali.
Esempio di attivazione e ascolto
Ora combiniamo .trigger() e .on(). Faccia clic sul pulsante e vedrà comparire il messaggio, a dimostrazione che il nostro evento personalizzato è stato sia attivato sia ricevuto!
<!-- 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>Passare dati con gli eventi
Gli eventi personalizzati sono ancora più utili quando è possibile passarvi dei dati. È possibile inviare argomenti aggiuntivi a .trigger() dopo il nome dell'evento. Questi argomenti verranno passati alla funzione che gestisce l'evento.
- Il primo argomento nel gestore è sempre l'oggetto evento.
- Gli argomenti successivi sono i dati passati con
.trigger().
Dimostrazione dei dati di un evento personalizzato
Qui attiviamo un evento 'dataReady' e passiamo una stringa e un oggetto. Il listener riceve questi dati e li visualizza. È così che i componenti condividono le informazioni!
<!-- 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>Disaccoppiamento per applicazioni migliori
Utilizzare gli eventi personalizzati per la comunicazione aiuta a creare applicazioni più modulari e facili da mantenere. Immagini un componente «carrello» e un componente «visualizzazione del prodotto».
- Quando viene aggiunto un prodotto, la «visualizzazione del prodotto» attiva
'productAdded'. - Il componente «carrello» ascolta
'productAdded'e si aggiorna.
Nessuno dei due componenti deve conoscere i metodi interni dell'altro: è sufficiente conoscere il contratto dell'evento.
Verifichi la Sua comprensione
Quali delle seguenti affermazioni descrivono correttamente i vantaggi o l'utilizzo degli eventi personalizzati con .trigger() e .on()?
Riepilogo: eventi personalizzati
Ottimo lavoro! Ha imparato a creare e gestire eventi personalizzati in jQuery. Ecco un breve riepilogo:
- Cosa: gli eventi personalizzati sono messaggi definiti dall'utente per i componenti dell'applicazione.
- Perché: promuovono il disaccoppiamento, favorendo un codice più pulito e flessibile.
- Come: utilizzi
.trigger('eventName', [data])per attivare un evento. - Come: utilizzi
.on('eventName', function(event, data) { ... })per ascoltare un evento.
Padroneggiare gli eventi personalizzati è un passo fondamentale per creare applicazioni jQuery solide e scalabili!
Domande Frequenti
La lezione «Creazione e attivazione di eventi personalizzati» è gratuita?
Sì — il testo completo di «Creazione e attivazione di eventi personalizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Creazione e attivazione di eventi personalizzati»?
Progettare e implementare eventi personalizzati usando .trigger() e .on() per disaccoppiare i componenti, creare codice più ordinato e abilitare comunicazioni flessibili tra le diverse parti dell'app… Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Creazione e attivazione di eventi personalizzati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Implementazione della delega degli eventi
- Interruzione della propagazione degli eventi
- Creazione e attivazione di eventi personalizzati