Front end ~ Handling events - MichaelChorak/projectTech GitHub Wiki

Chapter 15: Handling events

Een mechanisme om onze code te informeren wanneer er een event voorkomt. Dit kan doormiddel van verschillende events. Input is output zouden we hier kunnen toepassen. Als gebruiker doen we iets op een pagina en vervolgens krijgen we output te zien. Elke browser event is geregistreerd in een bepaalde context. Dit houdt in dan EventListeners alleen worden opgeroepen als het in de context gebeurt van het object met een EventListener. Als eerst moet je een element selecteren, hier voeg je vervolgens een Event aan toe en dan de methode om te laten weten wanneer het Event moet worden afgespeeld. Hier een aantal voorkomende mouse events:

  • Click
  • Dblclick
  • Mousedown
  • Mouseenter
  • Mouseleave
  • Mousemove Om een kleine impressie te geven van de mogelijkheden, er zijn er nog veel meer te vinden op de volgende site: https://developer.mozilla.org/en-US/docs/Web/Events Je kan een handler meegeven aan de attributen als je er een ‘on’ voor zet, dus bijvoorbeeld: Click me  Hier geef je de event al direct mee in de tag zelf in plaats van een aparte file. Event objects

Event handlers krijgen een argument mee. De Event Object. Dit is een object die extra informatie meekrijgt over het event zelf. De informatie die opgeslagen is in een object verschilt per event. Het bevat in ieder geval wel altijd een string die het event definieert.

<p>A paragraph with a <button>button</button>.</p>
<script>
  let para = document.querySelector("p");
  let button = document.querySelector("button");
  para.addEventListener("mousedown", () => {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", event => {
    console.log("Handler for button.");
    if (event.button == 2) event.stopPropagation();
  });
</script>
bron: https://eloquentjavascript.net/15_event.html

Om een event toe te passen aan een DOM element moet je eerst het element selecteren met een QuerySelector. Vervolgens gooi je op deze elementen een addEventListener en dit kan één van de bovenstaande events zijn. Vervolgens geef je aan wat er moet gebeuren als de event wordt gevuurd.

⚠️ **GitHub.com Fallback** ⚠️