De addEventListener

De addEventListener - inleiding

In JavaScript/ op een webpagina kunnen we verschillende acties van de gebruiker afvangen. Een van de bekenste acties van een gebruik is een klik, of in het Engels, click. Zo een actie vann de gebruiker noemen we in JavaScript een event vrij vertaald een evenement.

Er zijn veel verschillende events die je kan afvangen binnen JavaScript. In het voorbeeld nu vangen we constant het click event af, onderaan vind je een klein lijstje met mogelijke andere events die je kan afvangen.

De addEventListener - werking

<button class="my-button">Klik hier</button>

function myFunction() {
    alert('Er is op de button geklikt');
}

const myBtn = document.querySelector('.my-button');
myBtn.addEventListener('click', myFunction);

function myFunction() {
  alert('Er is op de button geklikt');
}

Verdieping - functie geschreven IN de eventListener

Bovenstaande geeft een goed voorbeeld weer van hoe je een losse functie kan maken en die kan gebruiken in de addEventListener. Soms heb je niet echt een losse functie nodig en dan kan je de functie ook (naamloos) direct als parameter in de addEventListener te zetten.

Hiervoor blijft praktisch alles hetzelfde, alleen de functie naam vervalt en je zet de functie in de listener.

const myBtn = document.querySelector('.my-button');
myBtn.addEventListener('click', function() {
    alert('Er is op de button geklikt');
});

Andere events

Zoals boven beschreven kan je meerdere events afvangen met een listener, mocht je geen klik maar iets anders willen afvangen zie de lijst hieronder:

                
Muis events:
                click – als er op een element geklikt wordt
                contextmenu – rechter muisklik
                mouseover / mouseout – als de muis over of weggaat
                mousedown / mouseup – als de muis klik naar beneden gaat of los gelaten wordt
                mousemove – als de muis beweegt
                
Keyboard events:
                keydown and keyup – als een toets op het toetsenbord ingedrukt wordt
                
Form element events:
                submit –als een formulier verstuurd wordt
                focus – als de focus op een element komt zoals op een <input>.
                
Document events:
                DOMContentLoaded – als alle HTML geladen en verwerkt is, de DOM is compleet geladen