Дар ҶаваСкрипт дар давр илова кардани обработчикҳо

Биёед ҳоло омӯзем, ки ҳаҷман ба элементҳо обработчиҳои воқеаҳоро илова кунем. Бигзор, масалан, мо абзасҳо дорем:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Бигзор мо инчунин функсия дорем:

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

Биёед абзасҳои худро дар давр гардонем ва ба ҳар як абзас ҳамчун обработчики клик функсияи func-ро илова кунем:

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

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

Биёед пеш рафта, чунин кунем, ки дар натиҷаи клик кардан ба ҳар як абзас матини ҳамон абзас чоп карда шавад. Аммо, мушкиле ҳаст: абзасҳо бисёранд, аммо функсияи обработчик якто аст. Пас, чӣ тавр мо абзасҳои худро дар дохили функсияи обработчик фарқ кунем?

Дар ин кори мо объекти this кӯмак хоҳад кард - вақте ки функсия дар лаҳзаи воқеа даъват карда мешавад, ин объект ба он элементи ишора хоҳад кард, ки дар он ин воқеа рух додааст. Коди функсияи func-ро мо мувофиқи он чӣ гуфта шуд табдил медиҳем:

function func() {
	console.log(this.textContent); // матни абзасро чоп мекунем
}

Функсияи зерин дода шудааст:

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

Инпутҳо низ дода шудаанд. Чунин кунед, ки барои аз даст додани фокус дар ягон инпути мо функсияи боло овардашуда иҷро карда шавад.

Абзасҳо бо ададҳо дода шудаанд. Чунин кунед, ки дар натиҷаи клик кардан ба ягон абзас адади дар он ба квадрат бардошта шавад.