Menambah Penangan dalam Gelung di JavaScript

Sekarang mari kita belajar menambah penangan peristiwa secara pukal kepada elemen. Sebagai contoh, katakan kita mempunyai perenggan:

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

Katakan juga kita mempunyai fungsi:

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

Mari kita ulangi semua perenggan kita dalam gelung dan setiap perenggan ditambah fungsi func sebagai penangan klik:

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

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

Mari kita teruskan dan buat supaya apabila mana-mana perenggan diklik, teks perenggan itu dipaparkan. Walau bagaimanapun, terdapat masalah: terdapat banyak perenggan, tetapi hanya satu fungsi penangan. Bagaimana kita membezakan perenggan kita di dalam fungsi penangan?

Objek this boleh membantu kita dalam hal ini - apabila fungsi dipanggil pada saat peristiwa, objek ini akan menunjuk kepada elemen di mana peristiwa itu berlaku. Mari ubah kod fungsi func kita berdasarkan apa yang telah dinyatakan:

javascriptfunction func() {
  console.log(this.textContent); // memaparkan teks perenggan
}

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