jQuery Academy · Les

Robuuste eventdelegatie implementeren

Leer de principes en voordelen van eventdelegatie met .on() om gebeurtenissen voor meerdere en toekomstige elementen met één listener af te handelen en de prestaties te verbeteren.

Les 1 van 311 stappen

Robuuste eventdelegatie implementeren is een gratis jQuery Academy-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject jQuery Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus jQuery Academy bevat in totaal 3 lessen.

Wat is gebeurtenisdelegatie?

Welkom bij gebeurtenisdelegatie! Met deze krachtige techniek kun je gebeurtenissen efficiënt beheren in je webapplicaties.

In plaats van veel gebeurtenislisteners aan afzonderlijke elementen te koppelen, koppel je één listener aan een gemeenschappelijk ouderelement. Het is alsof één 'toezichthouder' al zijn 'kinderen' in de gaten houdt voor specifieke acties.

Direct koppelen: een beperking

Wanneer je gebeurtenissen rechtstreeks aan elementen koppelt met .on() of andere methoden, wordt de listener alleen gekoppeld aan elementen die op dat exacte moment bestaan. Nieuwe elementen die later aan de DOM worden toegevoegd, krijgen niet automatisch de gebeurtenishandler.

Klik in het voorbeeld eerst op de oorspronkelijke knoppen. Na een korte vertraging verschijnt er een nieuwe knop. Probeer op de nieuwe knop te klikken: die reageert niet!

$(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);
});

Gebeurtenisborrelen begrijpen

Om delegatie te begrijpen, moet je weten wat gebeurtenisborrelen is. Wanneer er een gebeurtenis (zoals een klik) plaatsvindt op een element, wordt deze eerst op dat element geactiveerd, daarna op de ouder, vervolgens op de ouder van de ouder, helemaal tot aan document.

De eigenschap event.target verwijst altijd naar het oorspronkelijke element dat de gebeurtenis heeft geactiveerd, ongeacht welke ouder de gebeurtenis opvangt. Klik op de elementen hieronder en bekijk de uitvoer in de console.

$(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);
  });
});

jQuery's .on() voor delegatie

Je kunt de methode .on() van jQuery gebruiken voor gebeurtenisdelegatie door een extra selector-argument op te geven. De syntax ziet er zo uit:

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

Hier wordt de gebeurtenislistener gekoppeld aan parentSelector. De functie handler wordt echter alleen uitgevoerd als de gebeurtenis afkomstig is van een afstammeling die overeenkomt met childSelector.

Voorbeeld van gebeurtenisdelegatie

Laten we gebeurtenisdelegatie toepassen om het probleem uit scène 2 op te lossen. We koppelen de listener aan de bovenliggende container (#my-list), maar geven aan dat deze alleen moet reageren als de klik afkomstig is van een element dat overeenkomt met .item.

Let erop dat de nieuwe knop nu wel reageert op klikken zodra deze verschijnt!

$(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);
});

Dynamische elementen verwerken

Het belangrijkste voordeel uit het vorige voorbeeld is dat gebeurtenisdelegatie dynamisch toegevoegde elementen probleemloos verwerkt.

Omdat de listener op de statische ouder staat, vallen nieuwe kinderen die overeenkomen met childSelector automatisch onder die ene listener. Je hoeft gebeurtenissen niet telkens opnieuw te koppelen wanneer je inhoud toevoegt!

Betere prestaties

Naast het verwerken van dynamische inhoud biedt gebeurtenisdelegatie aanzienlijke prestatievoordelen:

Minder listeners: In plaats van een afzonderlijke gebeurtenislistener aan honderden elementen te koppelen, koppel je er maar één aan hun gemeenschappelijke ouder.
Minder geheugen: Minder listeners betekent dat je applicatie minder geheugen gebruikt.
Snellere start: De browser heeft minder tijd nodig om gebeurtenishandlers in te stellen wanneer de pagina wordt geladen.

Wanneer delegeer je gebeurtenissen?

Gebeurtenisdelegatie is een krachtig hulpmiddel, maar niet altijd nodig. Dit zijn ideale situaties om het te gebruiken:

Wanneer je werkt met een groot aantal vergelijkbare elementen (bijvoorbeeld items in een lange lijst of tabelrijen).
Wanneer elementen na het laden van de pagina dynamisch aan de DOM worden toegevoegd of eruit worden verwijderd.
Wanneer prestaties een belangrijke zorg zijn bij het verwerken van gebeurtenissen.

Aanbevolen werkwijzen voor delegatie

Volg deze aanbevolen werkwijzen om zoveel mogelijk uit gebeurtenisdelegatie te halen:

Kies de dichtstbijzijnde statische ouder: Delegeer aan de dichtstbijzijnde voorouder waarvan gegarandeerd is dat deze bestaat wanneer je pagina wordt geladen. Vermijd delegatie aan document of body als een dichterbij gelegen ouder volstaat.
Begrijp $(this): Binnen een gedelegeerde handler verwijst $(this) naar het oorspronkelijke element dat overeenkwam met childSelector, niet naar het ouderelement waaraan de listener is gekoppeld.
Let op gebeurtenisborrelen: Hoewel dit nuttig is voor delegatie, kan gebeurtenisborrelen soms onbedoelde neveneffecten veroorzaken als je het niet beheert (bijvoorbeeld met event.stopPropagation(), dat in een andere les wordt behandeld).

Test uw kennis

In welke van de volgende situaties is gebeurtenisdelegatie ideaal?

Beantwoord dit in de interactieve les

Samenvatting van gebeurtenisdelegatie

Goed gedaan! U hebt de belangrijkste principes van gebeurtenisdelegatie in jQuery geleerd.

U hebt geleerd hoe .on() met een childSelector één ouderluisterfunctie gebeurtenissen voor meerdere kinderen kan beheren, zelfs voor kinderen die dynamisch worden toegevoegd. Deze techniek is belangrijk om de prestaties te verbeteren, code eenvoudiger te maken en dynamische inhoud in uw jQuery-toepassingen efficiënt te verwerken.

Als u delegatie beheerst, wordt uw gebeurtenisafhandeling robuust en schaalbaar!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Robuuste eventdelegatie implementeren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad jQuery Academy, waaronder “Robuuste eventdelegatie implementeren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus jQuery Academy bevat in totaal 3 lessen.

Wat leer ik in “Robuuste eventdelegatie implementeren”?

Leer de principes en voordelen van eventdelegatie met .on() om gebeurtenissen voor meerdere en toekomstige elementen met één listener af te handelen en de prestaties te verbeteren. Je oefent met jQuery Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met jQuery Academy te beginnen?

Ervaring vooraf is niet nodig. jQuery Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 3.

Hoe lang duurt de les “Robuuste eventdelegatie implementeren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over jQuery Academy?

Ja. Elke les over jQuery Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar jQuery Academy