Notikumu apstrādātāju piesaistīšana elementiem JavaScript

Tagad iemācīsimies likt mūsu DOM elementiem reaģēt uz lietotāja darbībām. Piemēram, lietotājs ar peles klikšķi kaut kur noklikšķinās, un mūsu kods atbildē tam vajadzētu apstrādāt šo klikšķi un parādīt kādu informāciju ekrānā.

Lietotāja darbības, kuras mēs varam izsekot caur JavaScript, sauc par notikumiem. Notikumi var būt šādi: peles klikšķis uz lapas elementu, peles novirzīšana uz lapas elementu vai otrādi - peles kursora aiziešana no elementa un tā tālāk. Turklāt, ir notikumi, kas nav atkarīgi no lietotāja darbībām, piemēram, notikums pēc HTML lapas ielādes pārlūkā.

Piemēram, izveidosim pogu, uz kuras noklikšķinot ekrānā tiks parādīts kāds teksts. Vispirms izveidosim pogas HTML kodu:

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

Tagad iegūsim saiti uz pogu mainīgajā:

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

Tagad mums ir jāiestada mūsu pogas reakcija, uzklikšķinot uz tās. Šim nolūkam JavaScript ir īpaša metode addEventListener, kura kā pirmo parametru pieņem notikuma nosaukumu (klikšķis uz pogas ir ar nosaukumu 'click'), un kā otro parametru - funkciju atzvanījumu (callback), kas izpildās, kad šis notikums notiek.

Piemēram, uzklikšķinot uz pogas, izvadīsim kādu tekstu:

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

Dotas 3 pogas:

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

Iestatiet tā, lai, uzklikšķinot uz pirmās pogas, ekrānā tiktu izvadīts skaitlis 1, uzklikšķinot uz otrās - skaitlis 2, bet uzklikšķinot uz trešās - skaitlis 3.