Իրադարձությունների մշակիչները տարրերին կապելը 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 թիվը։