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

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

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

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

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

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

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

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

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

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

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