Tvarkyklių pririšimas prie elementų JavaScript kalba

Dabar išmokime, kaip padaryti, kad mūsų DOM elementai reaguotų į svetainės vartotojo veiksmus. Pavyzdžiui, vartotojas kur nors paspaus pele, o mūsų kodas atsakydamas turės apdoroti šį paspaudimą ir išvesti kokią nors informaciją ekrane.

Vartotojo veiksmai, kuriuos galime sekti per JavaScript, vadinami įvykiais. Įvykiai gali būti šie: pelės paspaudimas puslapio elemente, pelės užvedimas ant puslapio elemento arba atvirkščiai - pelės žymeklio nukrypimas nuo elemento ir pan. Be to, yra įvykių, kurie nepriklauso nuo vartotojo veiksmų, pavyzdžiui, HTML puslapio įkėlimo į naršyklę įvykis.

Pavyzdžiui, sukurkime mygtuką, kurį paspaudus ekrane bus išvestas koks nors tekstas. Pirmiausia sukurkime mygtuko HTML kodą:

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

Dabar gausime nuorodą į mygtuką į kintamąjį:

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

Dabar mums reikia nustatyti mūsų mygtuko reakciją paspaudus jį. Tam JavaScript egzistuoja specialus metodas addEventListener, kuris pirmu parametru priima įvykio pavadinimą (paspaudimas ant mygtuko turi pavadinimą 'click'), o antruoju parametru - atgalinio iškvietimo funkciją, kuri vykdoma, kai įvyksta šis įvykis.

Pavyzdžiui, paspaudus ant mygtuko išveskime kokį nors tekstą:

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

Duoti 3 mygtukai:

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

Padarykite taip, kad paspaudus ant pirmo mygtuko ekrane būtų išvestas skaičius 1, paspaudus ant antrojo - skaičius 2, o paspaudus ant trečiojo - skaičius 3.