Onderwerpen
Klik op logo voor startpagina.
Events
Open de inspector om de output van JavaScript te zien
Events zijn acties of gebeurtenissen die plaatsvinden in de browser, zoals het klikken op een knop, het laden van een pagina, of het invoeren van tekst in een formulier. JavaScript kan worden gebruikt om te reageren op deze events en interactieve webpagina's te maken.
Enkele veelvoorkomende events zijn:
click- doe iets wanneer een element wordt aangekliktload- doe ietswanneer een pagina of afbeelding is geladeninput- doe ietswanneer de waarde van een invoerveld verandertsubmit- doe iets wanneer een formulier wordt verzondenmouseover- doe ietswanneer de muis over een element beweegtkeydown- doe iets wanneer een toets op het toetsenbord wordt ingedrukt
JavaScript kan worden gebruikt om event listeners toe te voegen aan HTML elementen, zodat er specifieke functies worden uitgevoerd wanneer een bepaald event plaatsvindt. Dit maakt het mogelijk om dynamische en interactieve webpagina's te creëren die reageren op gebruikersinteracties.
Voorbeeld van mouse over en mouse out
// Mouse Over and Mouse Out Events
// Haal eerst element op waar we de events aan willen toevoegen
const hoverElement = document.querySelector('#mouseover-img');
// Voeg vervolgens de event listeners toe voor mouseover en mouseout
// Mouse over event: wanneer de muis over het element gaat, verander de afbeelding naar een varken
hoverElement.addEventListener('mouseover', () => {
hoverElement.src = 'img/pig.jpg';
});
// Mouse out event: wanneer de muis het element verlaat, verander de afbeelding terug naar een eend
hoverElement. addEventListener('mouseout', () => {
hoverElement.src = 'img/duck.jpg';
});
In dit voorbeeld hebben we een afbeelding van een eend. We kunnen een event listener toevoegen aan deze afbeelding, zodat er een andere afbeelding wordt getoond bij mouse over.
Voorbeeld van keydown en keyup
In dit voorbeeld kunnen we luisteren naar keydown en keyup events om te detecteren wanneer een gebruiker een toets indrukt of loslaat. We kunnen bijvoorbeeld de achtergrondkleur van de pagina veranderen wanneer de gebruiker een bepaalde toets indrukt.
// KEYDOWN en KEYUP Events
let outputElement = document.querySelector('#output');
// Haal het input element op waar we de events aan willen toevoegen
const inputElement = document.querySelector('#input');
inputElement.addEventListener('keydown', (event) => {
console.log(`Key down: ${event.key}`);
outputElement.innerHTML += `You pressed: ${event.key}
`;
});
inputElement.addEventListener('keyup', (event) => {
console.log(`Key up: ${event.key}`);
outputElement.innerHTML += `You released: ${event.key}
`;
});
Druk maar eens verschillende toetsen in en zie het resultaat van het afvangen van de toetsen hieronder:
Hier komt de output van de keydown en keyup events.