Binda händelsehanterare till element i JavaScript

Låt oss nu lära våra DOM-element att reagera på användarens handlingar på webbplatsen. Till exempel, användaren klickar någonstans med musen, och vår kod ska som svar behandla detta klick och visa viss information på skärmen.

Användarens handlingar som vi kan spåra via JavaScript kallas händelser. Händelser kan vara följande: musklick på ett sidselement, muspekaren över ett sidselement eller tvärtom - att muspekaren lämnar elementet, och så vidare. Dessutom finns det händelser som inte beror på användarens handlingar, till exempel händelsen när HTML-sidan laddas i webbläsaren.

Låt oss som exempel skapa en knapp som vid klick visar en text på skärmen. Först skapar vi HTML-koden för knappen:

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

Låt oss nu hämta en referens till knappen i en variabel:

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

Nu behöver vi definiera hur vår knapp ska reagera när man klickar på den. För detta finns det i JavaScript en speciell metod addEventListener, som tar händelsens namn som första parameter (klick på knappen har namnet 'click'), och som andra parameter - en funktion-återanrop, som körs när händelsen inträffar.

Låt oss till exempel visa någon text när man klickar på knappen:

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

Det finns 3 knappar:

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

Gör så att när man klickar på den första knappen visas siffran 1 på skärmen, när man klickar på den andra - siffran 2, och när man klickar på den tredje - siffran 3.