Oprettelse og udløsning af brugerdefinerede events
Design og implementér brugerdefinerede events med .trigger() og .on() for at afkoble komponenter, skabe renere kode og muliggøre fleksibel kommunikation mellem forskellige dele af din applikation.
Oprettelse og udløsning af brugerdefinerede events er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 3 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 3 lektioner i alt.
Introduktion til brugerdefinerede hændelser
Velkommen! I denne lektion lærer du, hvordan du opretter og håndterer dine egne brugerdefinerede hændelser i jQuery. Det er en effektiv måde at gøre din kode mere organiseret og fleksibel på.
Tænk på brugerdefinerede hændelser som særlige meddelelser, som forskellige dele af din webapplikation kan sende og modtage. Det hjælper dem med at kommunikere uden at være direkte forbundet.
Hvorfor bruge brugerdefinerede hændelser?
Hvorfor bruge brugerdefinerede hændelser? De hjælper med at løse et almindeligt problem: tæt kobling. Når komponenter er tæt koblet, kan en ændring i én del af din kode ødelægge en anden del.
- Afbrydning af koblinger: Komponenter behøver ikke at kende til hinandens interne funktionalitet.
- Renere kode: Logik, der hører til en bestemt handling, samles ét sted.
- Fleksibilitet: Du kan nemt tilføje eller fjerne lyttere uden at ændre "afsenderen".
Metoden .trigger()
For at "sende" eller "udløse" en brugerdefineret hændelse bruger vi jQuerys .trigger()-metode. Du kalder den på et jQuery-objekt, f.eks. et element eller document, og angiver hændelsesnavnet som en streng.
Hændelsesnavnet kan være hvad som helst, du vælger, f.eks. 'dataLoaded' eller 'itemAdded'.
Demonstration af udløsning af en hændelse
Lad os se .trigger() i praksis. Vi udløser en brugerdefineret hændelse kaldet 'myCustomEvent' på en knap, når der klikkes på den. Der sker ikke noget endnu, fordi ingen lytter!
<!-- 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>Lyt med .on()
For at "modtage" eller "lytte efter" en brugerdefineret hændelse bruger vi den velkendte .on()-metode. Ligesom med indbyggede hændelser som 'click' angiver du hændelsesnavnet og en funktion, der skal køres, når hændelsen udløses.
Du kan lytte på det samme element, som udløste hændelsen, på et overordnet element eller endda på selve document for globale hændelser.
Eksempel på udløsning og lytning
Lad os nu kombinere .trigger() og .on(). Klik på knappen, så vises en meddelelse, der viser, at vores brugerdefinerede hændelse både blev udløst og opfanget!
<!-- 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>Send data med hændelser
Brugerdefinerede hændelser er endnu mere nyttige, når du kan sende data sammen med dem. Du kan sende ekstra argumenter til .trigger() efter hændelsesnavnet. Disse argumenter sendes videre til din funktion, der håndterer hændelsen.
- Det første argument i håndteringsfunktionen er altid hændelsesobjektet.
- De efterfølgende argumenter er de data, du sendte med
.trigger().
Demonstration af data i brugerdefinerede hændelser
Her udløser vi en 'dataReady'-hændelse og sender en streng og et objekt med. Lytteren modtager disse data og viser dem. Det er sådan, komponenter deler oplysninger!
<!-- 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>Afbryd koblinger for bedre apps
Kommunikation via brugerdefinerede hændelser hjælper med at bygge mere modulære og vedligeholdelsesvenlige applikationer. Forestil dig en komponent til en "indkøbskurv" og en komponent til "produktvisning".
- Når et produkt tilføjes, udløser "produktvisningen"
'productAdded'. - Komponenten "indkøbskurv" lytter efter
'productAdded'og opdaterer sig selv.
Ingen af komponenterne behøver at kende den anden komponents interne metoder, kun hændelseskontrakten.
Test din forståelse
Hvilke af følgende udsagn beskriver korrekt fordelene ved eller brugen af brugerdefinerede hændelser sammen med .trigger() og .on()?
Opsummering: Brugerdefinerede hændelser
Godt gået! Du har lært, hvordan du opretter og håndterer brugerdefinerede hændelser i jQuery. Her er en kort opsummering:
- Hvad: Brugerdefinerede hændelser er brugerdefinerede meddelelser til applikationens komponenter.
- Hvorfor: De fremmer afkobling, hvilket fører til renere og mere fleksibel kode.
- Hvordan: Brug
.trigger('eventName', [data])til at udløse en hændelse. - Hvordan: Brug
.on('eventName', function(event, data) { ... })til at lytte efter en hændelse.
At mestre brugerdefinerede hændelser er et vigtigt skridt på vejen mod at bygge robuste og skalerbare jQuery-applikationer!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Oprettelse og udløsning af brugerdefinerede events” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Oprettelse og udløsning af brugerdefinerede events”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Oprettelse og udløsning af brugerdefinerede events”?
Design og implementér brugerdefinerede events med .trigger() og .on() for at afkoble komponenter, skabe renere kode og muliggøre fleksibel kommunikation mellem forskellige dele af din applikation. Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 3.
Hvor lang tid tager lektionen “Oprettelse og udløsning af brugerdefinerede events”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Robust event-delegering
- Stop event-propagering
- Oprettelse og udløsning af brugerdefinerede events