Gebeurtenissen Afhandelen in JavaScript

Articles

Dit artikel legt uit hoe gebeurtenissen worden afgehandeld in JavaScript.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

Gebeurtenissen Afhandelen in JavaScript

Het afhandelen van gebeurtenissen in JavaScript is een mechanisme om specifieke acties uit te voeren als reactie op gebruikershandelingen (zoals klikken en toetsenbordinvoer) of browseracties. Door gebeurtenisluisteraars in te stellen, kun je dynamische en interactieve webpagina's maken.

Basisprincipes van Gebeurtenissen

Gebeurtenissen treden op als reactie op gebruikershandelingen en browseracties. Wanneer een gebeurtenis plaatsvindt, wordt de bijbehorende gebeurtenisverwerker (functie) uitgevoerd. Er zijn bijvoorbeeld gebeurtenissen zoals de volgende:.

Klik (click)
Toetsenbordinvoer (keydown, keyup)
Muismovement (mousemove, mouseover)
Formulierversturen (submit)
Voltooid Paginaladen (DOMContentLoaded)
Scrollen (scroll)

Gebeurtenisluisteraars Toevoegen

Gebeurtenisluisteraars worden ingesteld met behulp van de methode addEventListener(). Deze methode roept een specifieke functie aan wanneer de opgegeven gebeurtenis plaatsvindt.

Basis Syntax van `addEventListener()`

1element.addEventListener(event, handler);

element is het HTML-element dat het evenement bewaakt.
event is de naam van het evenement (bijvoorbeeld, click).
handler is de functie die wordt uitgevoerd wanneer het evenement plaatsvindt.

Gebeurtenis Object

Wanneer een gebeurtenis plaatsvindt, geeft JavaScript een event object door met de details van de gebeurtenis aan de event handler. Dit object bevat informatie zoals welk element de gebeurtenis heeft geactiveerd en welke toets werd ingedrukt.

Voorbeeld: Gebruik van het Event Object

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

Deze code gebruikt het gebeurtenisobject om gedetailleerde informatie en het aangeklikte element in de console weer te geven wanneer er op de knop wordt geklikt.

Typische Gebeurtenissen

Klik Gebeurtenis

De click-gebeurtenis vindt plaats wanneer de gebruiker op een element klikt.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

Deze code toont een bericht in de console wanneer op het element wordt geklikt.

Toetsenbord Gebeurtenissen

keydown- en keyup-gebeurtenissen vinden plaats wanneer de gebruiker een toets indrukt of loslaat. Je kunt event.key gebruiken om te zien welke toets werd ingedrukt.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

Deze code toont de naam van de toets in de console wanneer de gebruiker een toets indrukt.

Muis Gebeurtenissen

mousemove- en mouseover-gebeurtenissen vinden plaats bij muisbewegingen en hover-actie.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

Deze code toont de positie (X- en Y-coördinaten) in de console telkens wanneer de muis beweegt.

Formulier Gebeurtenissen

Formuliergerelateerde gebeurtenissen omvatten submit en input. De submit-gebeurtenis vindt plaats wanneer een formulier wordt verzonden en veroorzaakt meestal een paginavernieuwing. Maar event.preventDefault() wordt vaak gebruikt om dit te voorkomen.

Voorbeeld: Voorkomen van paginavernieuwing bij het verzenden van een formulier

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

Deze code voorkomt dat de pagina wordt herladen wanneer het formulier wordt verzonden en toont in plaats daarvan een bericht in de console.

Gebeurtenis Propagatie (Bubbling en Capturing)

Gebeurtenissen propaganderen door twee fasen: de capturing-fase, die van de ouder-elementen naar de kind-elementen gaat, en de bubbling-fase, die van de kind-elementen naar de ouder-elementen gaat.

Bubbling van Gebeurtenissen

Standaard vinden gebeurtenissen plaats bij het binnenste element en propaganderen naar buiten. Dit wordt bubbling genoemd.

Voorbeeld: Bubbling Voorbeeld

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

In dit voorbeeld, wanneer je op een knop klikt, vindt eerst de gebeurtenis van de knop plaats, gevolgd door de gebeurtenis van het ouder-element.

Capturing van Gebeurtenissen

Door true als derde argument op te geven in addEventListener(), kun je gebeurtenissen afhandelen in de capturing-fase.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

Deze code behandelt het klik-evenement van het bovenliggende element in de capturing-fase en toont een bericht in de console.

Voorkomen van Propagatie met `stopPropagation()`

Je kunt voorkomen dat gebeurtenissen zich voortplanten met event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

Deze code voorkomt dat het evenement zich verder verspreidt wanneer op de knop wordt geklikt en toont een bericht in de console.

Gebeurtenissen Verwijderen

Je kunt eventlisteners verwijderen met behulp van removeEventListener(). Om een eventlistener te verwijderen, heb je een referentie nodig naar de functie die is opgegeven in addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

Deze code verwijdert de klik-eventlistener van de knop zodat deze bij het klikken niet meer wordt verwerkt.

Aangepaste Gebeurtenissen

In JavaScript kun je aangepaste gebeurtenissen maken en activeren naast standaardgebeurtenissen. Gebruik de CustomEvent constructor.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

Deze code maakt en verzendt een aangepast evenement myCustomEvent en toont de details ervan in de console.

Samenvatting

Event handling is een essentieel onderdeel om de interactiviteit van webapplicaties te verbeteren. Door de onderdelen van event handling te benutten, kun je een flexibelere en geavanceerdere gebruikerservaring bieden.

Event Listener: Gebruik addEventListener() om een event handler op een element in te stellen.
Event Object: Wanneer een gebeurtenis plaatsvindt, wordt er een event-object doorgegeven dat kan worden gebruikt om gedetailleerde informatie te verkrijgen.
Event Propagation: Gebeurtenissen planten zich voort in twee fasen: bubbling en capturing.
Form Events en Custom Events: Je kunt formulieren verwerken en je eigen aangepaste gebeurtenissen afhandelen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Shadow DOM in JavaScript

Gebeurtenissen Afhandelen in JavaScript

YouTube Video

Gebeurtenissen Afhandelen in JavaScript

Basisprincipes van Gebeurtenissen

Gebeurtenisluisteraars Toevoegen

Basis Syntax van addEventListener()

Gebeurtenis Object

Voorbeeld: Gebruik van het Event Object

Typische Gebeurtenissen

Klik Gebeurtenis

Toetsenbord Gebeurtenissen

Muis Gebeurtenissen

Formulier Gebeurtenissen

Voorbeeld: Voorkomen van paginavernieuwing bij het verzenden van een formulier

Gebeurtenis Propagatie (Bubbling en Capturing)

Bubbling van Gebeurtenissen

Voorbeeld: Bubbling Voorbeeld

Capturing van Gebeurtenissen

Voorkomen van Propagatie met stopPropagation()

Gebeurtenissen Verwijderen

Aangepaste Gebeurtenissen

Samenvatting

YouTube Video

Basis Syntax van `addEventListener()`

Voorkomen van Propagatie met `stopPropagation()`