Kuongeza Vichakataji Katika Kitanzi katika JavaScript

Hebu sasa tujifunze jinsi ya kuongeza kwa wingi vichakataji matukio kwa vipengele. Hebu sema, kwa mfano, tuna aya:

<p>maandishi1</p>
<p>maandishi2</p>
<p>maandishi3</p>

Hebu sema pia tuna kitendakazi:

function func() {
	console.log('!');
}

Hebu tutunge aya zetu katika kitanzi na kila aya tuongeze kama kichakataji cha kubonyeza kitendakazi func:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

Hebu tuendelee zaidi na tufanye ili kwa kubonyeza kwa aya yoyote ionyeshe maandishi ya aya hiyo. Hata hivyo, kuna tatizo: kuna aya nyingi, lakini kichakataji kitendakazi kimoja. Basi vipi tunaweza kutofautisha aya zetu ndani ya kichakataji kitendakazi?

Hili latusaidia kwa kutumia kitu this - wakati kitendakazi kinapoitwa wakati wa tukio kitu hiki kitaelekeza kwenye kipengele ambapo tukio hili lilitokea. Hebu tubadilishe msimbo wa kitendakazi chetu func kulingana na yaliyosemwa:

function func() {
	console.log(this.textContent); // tunatoa maandishi ya aya
}

Imetolewa kitendakazi kifuatacho:

function func() {
	this.value = Number(this.value) + 1;
}

Pia vingilio vimetolewa. Fanya ili kupoteza umakini katika kipengele chochote cha kuingizia kitendakazi hapo juu itekelezwe.

Aya zimenenewa nambari. Fanya ili kwa kubonyeza kwa aya yoyote nambari iliyomo imeinuliwa mraba.