Wat is het gebeurtenismodel in de browser?

Methode voor het afhandelen van gebruikersinteracties (klikken, invoeren, hoveren) en systeemgebeurtenissen (pagina laden, fouten) in de webbrowser.

Belangrijke concepten:

• Gebeurtenis: Actie die heeft plaatsgevonden.
• Gebeurtenishandler: Functie die wordt uitgevoerd bij het optreden van de gebeurtenis.
• Gebeurtenisobject (Event object): Wordt doorgegeven aan de handler en bevat informatie over de gebeurtenis (type, element, coördinaten, etc.).

Standaard stroom van gebeurtenissen:

1. Capturing (Vangfase): De gebeurtenis daalt van het bovenste DOM-element (Window, Document) naar het doel-element. Handlers in deze fase worden eerst geactiveerd.
2. Doelfase (Target phase): De gebeurtenis bereikt het doel-element waar het plaatsvond.
3. Bubbling (Bubbelfase): De gebeurtenis stijgt van het doel-element terug door de DOM-structuur naar Window. Handlers in deze fase worden na de capturing en target fase geactiveerd.

Toevoegen van handlers:

• HTML-attributen (onclick, onload): Verouderde methode, niet aanbevolen voor complexe applicaties.
• Eigenschappen van DOM-elementen (element.onclick): Kan slechts één handler per gebeurtenistype per element toewijzen.

  // Voorbeeld
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Knop ingedrukt!');
  };
  

• Methode addEventListener: Voorkeurmethode. Maakt het mogelijk meerdere handlers toe te voegen voor één gebeurtenis en de fase van afhandeling te controleren (capturing of bubbling).

  // Voorbeeld
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Klik op knop!', event);
  }, false); // false - bubbling, true - capturing
  

De methode removeEventListener wordt gebruikt om handlers te verwijderen.

Eventdelegatie: Het toevoegen van één handler aan een ouder element om gebeurtenissen van kindelementen te beheren. Bespaart bronnen en vereenvoudigt werken met dynamische inhoud.

// Voorbeeld van delegatie
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Klik op lijstitem:', event.target.textContent);
    }
});