Tilknytte hendelseshåndterere til elementer i JavaScript
La oss nå lære våre DOM-elementer å reagere på handlingene til nettstedets bruker. For eksempel, brukeren klikker et sted med muse, og vår kode skal som svar behandle dette klikket og vise informasjon på skjermen.
Brukerhandlinger som vi kan spore via JavaScript, kalles hendelser. Hendelser kan være følgende: et museklikk på et sideelement, musepekeren føres over et sideelement eller omvendt - at musepekeren forlater elementet, og så videre. I tillegg finnes det hendelser som ikke avhenger av brukerens handlinger, for eksempel en hendelse når HTML-siden lastes inn i nettleseren.
La oss for eksempel lage en knapp som, når den klikkes på, viser en tekst på skjermen. Først lager vi HTML-koden for knappen:
<input id="button" type="submit">
La oss nå få en referanse til knappen i en variabel:
let button = document.querySelector('#button');
Nå må vi definere reaksjonen vår
for knappen når det klikkes på den. For dette finnes det i JavaScript
en spesiell metode addEventListener,
som tar hendelsens navn som første parameter
(et klikk på knappen har navnet 'click'),
og som andre parameter - en callback-funksjon,
som utføres når denne hendelsen inntreffer.
La oss for eksempel, ved et klikk på knappen, vise en tekst:
button.addEventListener('click', function() {
console.log('!!!');
});
Det er gitt 3 knapper:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
Gjør slik at ved et klikk på den første knappen
vises tallet 1 på skjermen, ved et klikk
på den andre - tallet 2, og ved et klikk på
den tredje - tallet 3.
