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 саны чыгарылышы үчүн кылыңыз.