Gebeurtenissen in de DOM

Gebeurtenissen in de DOM (Eng. DOM Events) worden verzonden door de JavaScript engine uit de browser verzonden om de JavaScript-code te notificeren dat bepaalde gebeurtenissen plaatsvinden. Elk event wordt gepresenteerd door een object dat gebaseerd is op de Event interface. Dit object bevat een resem aan eigenschappen en methoden die we kunnen aanspreken en eventueel manipuleren.

Binnen de DOM kunnen heel wat verschillende gebeurtenissen (opens new window) plaatsvinden:

• Mouse Events
• Keyboard Events
• Drag & Drop Events
• Clipboard Events
• Form Events
• Focus Events
• Value Change Events
• Progress Events
• Media Events
• View Events
• Storage Events
• CSS Transition Events
• CSS Animation Events
• …

Registeren van “Event listeners”

Een “Event listener” of “Event handler” handelt een bepaalde gebeurtenis af. Wanneer een bepaalde gebeurtenis optreedt, dan wordt de gekoppelde luisteraar uitgevoerd. In JavaScript zijn er 3 manieren om een luisteraar te koppelen aan een element voor een specifieke gebeurtenis. Bij voorkeur registeren we een handler via EventTarget.addEventListener() (primeert voor de andere manieren).

const btnElement = document.querySelector('.btn__greet');
btnElement.addEventListener('click', greet, false);
function greet (ev) {
    console.log(ev);
}

Via de functie addEventListener() koppelen we een luisteraar aan een bestaand element. De eerste parameter uit de functie representeert het event type (opens new window), in dit geval “het klikken via de muis op iets” komt overeen met het event type click. De tweede parameter representeert de luisteraar. Dit is meestal een “callback functie” met als argument het Event object. Het kan ook een object zijn die de EventListener interface implementeert. De derde “optionele” parameter zijn een aantal instelbare opties. De code kunnen we korter schrijven via arrow function:

const btnElement = document.querySelector('.btn__greet');
btnElement.addEventListener('click', ev => console.log(ev), false);

De tweede manier is door gebruik te maken van specifieke attributen in HTML. Bijv. het button element heeft een attribuut onclick. De waarde die toegekend is aan dit attribuut is JavaScript-code die zal uitgevoerd worden wanneer we klikken op deze knop. Deze manier moeten we vermijden omdat de HTML wordt vervuild met JavaScript-code en dus door niet semantische dingen. De markup (HTML) wordt groter in omvang en is minder leesbaar.