Gebeurtenisafhandelaars koppelen aan elementen in JavaScript

Laten we onze DOM-elementen nu leren reageren op de acties van de gebruiker van de website. Bijvoorbeeld, de gebruiker klikt ergens met de muis, en onze code moet als reactie deze klik verwerken en een bepaalde informatie op het scherm weergeven.

Gebruikersacties die we kunnen volgen via JavaScript, worden gebeurtenissen genoemd. Gebeurtenissen kunnen de volgende zijn: klikken met de muis op een pagina-element, de muis aanwijzen op een pagina-element of andersom - de muisaanwijzer van het element af halen, enzovoort. Bovendien zijn er gebeurtenissen die niet afhankelijk zijn van gebruikersacties, bijvoorbeeld de gebeurtenis bij het laden van de HTML-pagina in de browser.

Laten we als voorbeeld een knop maken, waar bij het klikken erop een tekst op het scherm wordt weergegeven. Laten we eerst de HTML-code van de knop maken:

<input id="button" type="submit">

Laten we nu een referentie naar de knop in een variabele krijgen:

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

Nu moeten we de reactie van onze knop bij een klik erop instellen. Hiervoor bestaat in JavaScript een speciale methode addEventListener, die als eerste parameter de naam van de gebeurtenis accepteert (klikken op de knop heeft de naam 'click'), en als tweede parameter - een callback-functie, die wordt uitgevoerd wanneer deze gebeurtenis plaatsvindt.

Laten we bijvoorbeeld bij een klik op de knop een tekst weergeven:

button.addEventListener('click', function() {
	console.log('!!!');
});

Er zijn 3 knoppen gegeven:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Zorg ervoor dat bij een klik op de eerste knop het getal 1 op het scherm wordt weergegeven, bij een klik op de tweede - het getal 2, en bij een klik op de derde - het getal 3.