Tilknytning af event handlers til elementer i JavaScript

Lad os nu lære vores DOM-elementer at reagere på brugerens handlinger på hjemmesiden. For eksempel, brugeren klikker et sted med musen, og vores kode skal som svar behandle dette klik og vise en information på skærmen.

Brugerhandlinger, som vi kan spore via JavaScript, kaldes events. Events kan være følgende: et museklik på et sideelement, at musepegeren bevæges hen over et sideelement eller omvendt - når markøren fjernes fra elementet, og så videre. Derudover er der events, der ikke afhænger af brugerens handlinger, for eksempel et event, der udløses når HTML-siden er indlæst i browseren.

Lad os som eksempel lave en knap, hvor der ved klik på den vises en tekst på skærmen. Til at starte med laver vi HTML-koden til knappen:

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

Lad os nu hente en reference til knappen i en variabel:

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

Nu er vi nødt til at definere, hvordan vores knap skal reagere, når der klikkes på den. Til dette formål findes der i JavaScript en speciel metode kaldet addEventListener. Den tager som første parameter navnet på eventet (et klik på en knap har navnet 'click'), og som anden parameter - en callback-funktion, der udføres, når eventet indtræffer.

Lad os for eksempel ved et klik på knappen udskrive en eller anden tekst:

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

Der er givet 3 knapper:

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

Gør så, at der ved klik på den første knap udskrives tallet 1 til skærmen, ved klik på den anden - tallet 2, og ved klik på den tredje - tallet 3.