JavaScriptda elementlarga ishlovchi funksiyalarni bog‘lash

Keling, endi bizning DOM elementlarimiz sayt foydalanuvchisining harakatlariga javob berishni o‘rgataylik. Masalan, foydalanuvchi sichqoncha bilan biror joyni bosganda, bizning kodimiz esa bu bosishni qayta ishlab, ekranga ma'lumot chiqarishi kerak.

JavaScript orqali kuzatib borishimiz mumkin bo'lgan foydalanuvchi harakatlari hodisalar deb ataladi. Hodisalar quyidagilar bo'lishi mumkin: sahifa elementiga sichqoncha bilan klik qilish sichqonchani element ustiga olib kelish yoki aksincha - sichqoncha kursori elementdan chiqib ketishi va hokazo. Bundan tashqari, foydalanuvchi harakatlariga bog'liq bo'lmagan hodisalar ham mavjud, masalan, HTML sahifasining brauzerga yuklanishi hodisasi.

Keling, misol uchun, bosilganda ekranga ma'lum bir matn chiqadigan tugma yarataylik. Boshlash uchun tugma HTML kodini yozamiz:

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

Endi tugmani o'zgaruvchiga havola qilamiz:

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

Endi biz o'z tugmamizning unga bosilganda qanday reaktsiya qilishini belgilashimiz kerak. Buning uchun JavaScriptda maxsus addEventListener metodi mavjud, birinchi parametri sifatida hodisa nomini qabul qiladi (tugmani bosish 'click' deb nomlanadi), ikkinchi parametri sifatida esa - ushbu hodisa yuzaga kelganda ishlaydigan funksiya-kollbek.

Keling, masalan, tugmani bosilganda ma'lum bir matn chiqaramiz:

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

3 ta tugma berilgan:

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

Birinchi tugma bosilganda ekranga 1 soni chiqsin, ikkinchisi bosilganda - 2 soni, uchinchisi bosilganda esa 3 soni chiqsin.