jQuery Academy · leksjon

Robust implementering av hendelsesdelegering

Lær prinsippene og fordelene ved hendelsesdelegering med .on() for å håndtere hendelser for flere og fremtidige elementer med én enkelt lytter, og forbedre ytelsen.

Leksjon 1 av 311 trinn

Robust implementering av hendelsesdelegering er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 1 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.

Hva er hendelsesdelegering?

Velkommen til hendelsesdelegering! Denne kraftige teknikken hjelper deg med å håndtere hendelser effektivt i webapplikasjonene dine.

I stedet for å legge til mange hendelseslyttere på individuelle elementer, legger du til én enkelt lytter på et felles overordnet element. Det er som å ha én «veileder» som følger med på alle «barna» sine etter bestemte handlinger.

Direkte binding: En begrensning

Når du binder hendelser direkte til elementer ved hjelp av .on() eller andre metoder, legges lytteren bare til på elementer som finnes akkurat da. Nye elementer som senere legges til i DOM-en, får ikke automatisk hendelsesbehandleren.

I eksempelet kan du prøve å klikke på de opprinnelige knappene. Etter en kort forsinkelse vises en ny knapp. Prøv å klikke på den nye knappen – den reagerer ikke!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

Forstå hendelsesbobling

For å forstå delegering må du kjenne til hendelsesbobling. Når en hendelse, for eksempel et klikk, oppstår på et element, utløses den først på dette elementet, deretter på forelderen, så på forelderens forelder og videre helt opp til document.

Egenskapen event.target viser alltid til det opprinnelige elementet som utløste hendelsen, uansett hvilken forelder som fanger den opp. Prøv å klikke på elementene nedenfor, og følg med på utskriften i konsollen.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

jQuerys .on() for delegering

jQuerys .on()-metode kan brukes til hendelsesdelegering ved å angi et ekstra selector-argument. Syntaksen ser slik ut:

$(parentSelector).on(event, childSelector, handler);

Her festes hendelseslytteren til parentSelector. handler-funksjonen kjøres imidlertid bare hvis hendelsen oppstod på et etterkommende element som samsvarer med childSelector.

Eksempel på hendelsesdelegering

La oss nå bruke hendelsesdelegering til å løse problemet fra scene 2. Vi fester lytteren til den overordnede beholderen (#my-list), men ber den bare reagere hvis klikket kom fra et element som samsvarer med .item.

Legg merke til at den nye knappen nå vil reagere på klikk når den vises!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

Håndtere dynamiske elementer

Den viktigste fordelen som ble vist i forrige eksempel, er hvordan hendelsesdelegering håndterer dynamisk tilføyde elementer på en smidig måte.

Siden lytteren ligger på den statiske forelderen, vil alle nye barn som samsvarer med childSelector, automatisk omfattes av denne ene lytteren. Du trenger ikke å binde hendelser på nytt hver gang du legger til innhold!

Bedre ytelse

I tillegg til å håndtere dynamisk innhold gir hendelsesdelegering betydelige ytelsesfordeler:

Færre lyttere: I stedet for å legge til en separat hendelseslytter på hundrevis av elementer, legger du bare til én på den felles forelderen.
Redusert minnebruk: Færre lyttere betyr at applikasjonen bruker mindre minne.
Raskere oppstart: Nettleseren bruker mindre tid på å sette opp hendelsesbehandlere når siden lastes inn.

Når bør du delegere hendelser?

Hendelsesdelegering er et kraftig verktøy, men det er ikke alltid nødvendig. Her er situasjoner der det egner seg godt:

Når du håndterer et stort antall like elementer (for eksempel elementer i en lang liste eller tabellrader).
Når elementer legges til eller fjernes dynamisk fra DOM-en etter at siden er lastet inn.
Når ytelse er en viktig prioritet ved håndtering av hendelser.

Beste praksis for delegering

Følg disse anbefalte fremgangsmåtene for å få mest mulig ut av hendelsesdelegering:

Velg den nærmeste statiske forelderen: Deleger til den nærmeste overordnede som garantert finnes når siden lastes inn. Unngå å delegere til document eller body hvis en nærmere forelder fungerer.
Forstå $(this): Inne i en delegert handler viser $(this) til det opprinnelige elementet som samsvarte med childSelector, ikke til forelderelementet som lytteren er festet til.
Vær oppmerksom på bobling: Selv om bobling er nyttig ved delegering, kan den noen ganger føre til utilsiktede bivirkninger hvis den ikke håndteres, for eksempel med event.stopPropagation(), som dekkes i en annen leksjon.

Test kunnskapene Deres

Hvilke av følgende scenarier egner seg best for bruk av event delegation?

Besvar den i den interaktive leksjonen

Oppsummering av event delegation

Godt jobbet! De har lært de grunnleggende prinsippene for event delegation i jQuery.

Vi har gått gjennom hvordan .on() med en childSelector lar én lytter på et overordnet element håndtere hendelser for flere underordnede elementer, også elementer som legges til dynamisk. Denne teknikken er viktig for å forbedre ytelsen, forenkle koden og håndtere dynamisk innhold effektivt i jQuery-applikasjonene Deres.

Når De mestrer delegation, blir hendelseshåndteringen robust og skalerbar!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Robust implementering av hendelsesdelegering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Robust implementering av hendelsesdelegering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.

Hva lærer jeg i «Robust implementering av hendelsesdelegering»?

Lær prinsippene og fordelene ved hendelsesdelegering med .on() for å håndtere hendelser for flere og fremtidige elementer med én enkelt lytter, og forbedre ytelsen. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med jQuery Academy?

Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 3.

Hvor lang tid tar leksjonen «Robust implementering av hendelsesdelegering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?

Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Robust implementering av hendelsesdelegering
Stoppe hendelsespropagering
Opprette og utløse egendefinerte hendelser

← Tilbake til jQuery Academy