Change Event in JavaScript

In deze les zullen we het event change bespreken, dat optreedt in invoervelden bij wijzigingen. Wat betekent dit? Stel, je hebt een invoerveld met daarin een bepaalde tekst. Als je deze tekst wijzigt, dan treedt dit event op.

Laten we een voorbeeld bekijken. Stel we hebben een invoerveld:

<input id="elem" value="text">

Laten we bij wijziging de nieuwe waarde in de console loggen:

let elem = document.querySelector('#elem');

elem.addEventListener('change', function() {
	console.log(this.value);
});

Gegeven een invoerveld en een paragraaf. Bij wijziging van het invoerveld geef de tekst ervan weer in de paragraaf.

Gegeven een checkbox. Bij wijziging van de checkbox geef de nieuwe status ervan weer op het scherm.

Leg uit wat het verschil is tussen de events blur en change.

Gegeven een invoerveld. Controleer bij wijziging of het aantal tekens daarin minder is dan 5 of niet. Als het minder is - kleur de rand van het invoerveld groen, en als het meer is - rood.