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

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

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

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

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

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

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

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

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

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

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

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