JavaScript-de elementlere işleýjileri birikdirmek

Indi DOM elementlerimizi web sahypasynyň ulanyjysynyň hereketlerine jogap bermäge öwreneliň. Mysal üçin, ulanyjy bir ýere çeňňegini basanda, bizim kodymyz bu basylyşy işlemeli we ekrana birnäçe maglumat çykarmaly.

JavaScript arkaly yzarlap bolýan ulanyjynyň hereketleri, ýagdaýlar diýilýär. Ýagdaýlar aşakdaky ýaly bolup biler: sahypanyň elementine çeňňek bilen basmak, çeňňegi sahypanyň elementine getirmek ýa-da tersine - çeňňegiň elementden çykmagy we ş.m. Mundan başga-da, ulanyjynyň hereketlerine bagly bolmadyk ýagdaýlar hem bar, mysal üçin, HTML sahypasynyň brauzere ýüklenýän ýagdaýy.

Mysal üçin, basylanda ekrana birnäçe teksti çykarýan düwmäni ýasalyň. Ilki bilen düwmeniň HTML kodyny ýasaýarys:

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

Indi düwme üçin çykgytly salgyny üýtgeýjide alyň:

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

Indi bizim düwmämiziň üstüne basylandaky jogabyny kesgitlemeli. Bunun üçin JavaScript-de ýörite bir addEventListener metody bar, ilkinji parametri ýagdaýyň adyny kabul edýär (düwmäni basmak 'click' adyna eýe), ikinji parametri bolsa - bu ýagdaý ýüze çykanda işleýän funksiýa-kolbek.

Geliň, mysal üçin, düwmä basylanda birnäçe teksti çykaryň:

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

3 düwme berlen:

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

Birinci düwmä basylanda ekrana 1 sanysy, ikinji düwmä basylanda - 2 sanysy, üçünji düwmä basylanda bolsa - 3 sanysy çykmak üçin ýazyň.