JavaScriptда элементларга ишловчиларни боглаш

Келингиз энди бизнинг DOM элементларимизни саҳифа фойдаланувчисининг ҳаракатларига жавоб беришига ўргатамиз. Масалан, фойдаланувчі сичқончани бирор жерга босса, ва бизнинг кодимиз жавобан ушбу босишни қайта ишлаб, экранга бирон маълумот чиқаради.

Фойдаланувчининг биз JavaScript орқали кузатиб борадиган ҳаракатлари воқеалар деб аталади. Воқеалар куйидагилар бўлиши мумкин: сичқонча орқали саҳифа элементини босиш, сичқончани элемент устига келтириш ёки аксінча - сичқонча курсорининг элементдан чиқиши ва ҳоказо. Бундан ташқари, фойдаланувчи ҳаракатларига боглик бўлмаган воқеалар ҳам мавжуд, масалан, HTML саҳифасининг браузерга юкланганлик воқеаси.

Келингиз мисол учун шундай тугма ясайлик, уни босганда экранга бирон матн чиқади. Аввало тугманинг HTML кодини ясаймиз:

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

Энди тугмага ҳаволани ўзгартувчига оламиз:

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

Энди биз тугмага босилганда унинг реакциясини белгишимиз керек. Бунинг учун JavaScriptда махсус addEventListener усули мавжуд бўлиб, биринчи параметри сифатида воқеа номини (тугмани босиш 'click' номига эга), иккинчи параметри сифатида эса - функция-коллбэкни қабул қилади, ушбу воқеа юз белганда ишга тушади.

Келингиз, масалан, тугма босилганда бирон матн чиқарайлик:

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

3 та тугма берилган:

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

Шундай килингки, биринчи тугма босилганда экранга 1 сони чиқсин, иккинчи тугма босилганда - 2 сони, учинчи тугма босилганда эса - 3 сони чиқсин.