Kufunga Vichakataji kwa Vipengele katika JavaScript

Hebu sasa tujifunze kufanya vipengele vyetu vya DOM kukabiliana na vitendo vya mtumiaji wa tovuti. Kwa mfano, mtumiaji atabonya popote kwa kifundo cha panya, na msimbo wetu unapaswa kukabiliana na ubonye huo na kuonyesha taarifa fulani kwenye skrini.

Vitendo vya mtumiaji, ambavyo tunaweza kufuatilia kupitia JavaScript, huitwa matukio. Matukio yanaweza kuwa kama ifuatavyo: kubonya kwa kifundo cha panya kwenye kipengele cha ukurasa, kuelekeza kifundo cha panya kwenye kipengele cha ukurasa au kinyume chake - kuondoka kwa mshale wa kifundo cha panya kutoka kwenye kipengele na kadhalika. Zaidi ya hayo, kuna matukio, yasiyoategemea vitendo vya mtumiaji, kwa mfano, tukio la kupakia ukurasa wa HTML kwenye kivinjari.

Hebu kwa mfano tutengeneze kifungo, ambacho kibonyezo kinachoonyesha maandishi fulani kwenye skrini. Kwanza tutengeneze msimbo wa HTML wa kifungo:

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

Sasa tupate kiungo cha kifungo kwenye kutofautisha:

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

Sasa inahitajika kuweka majibu ya kifungo chetu wakati wa kubonyeza. Kwa hili katika JavaScript kuna njia maalum addEventListener, inayokubali parameter ya kwanza jina la tukio (kubonyeza kifungo ina jina 'click'), na parameter ya pili - function-callback, inayofanya wakati tukio hilo litakapotokea.

Hebu, kwa mfano, kwa kubonyeza kifungo tuonyeshe maandishi fulani:

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

Kuna 3 vibonyezo:

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

Fanya ili kwa kubonyeza kifungo cha kwanza kuonyesha nambari 1 kwenye skrini, kwa kubonyeza cha pili - nambari 2, na kwa kubonyeza cha tatu - nambari 3.