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 саны шығатындай етіңіз.