Menambahkan Penangan dalam Loop di JavaScript

Sekarang mari kita belajar untuk menambahkan penangan peristiwa ke elemen secara massal. Misalnya, kita memiliki beberapa paragraf:

html<p>teks1</p>
<p>teks2</p>
<p>teks3</p>

Misalkan kita juga memiliki sebuah fungsi:

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

Mari kita ulas paragraf-paragraf kita dalam sebuah loop dan untuk setiap paragraf tambahkan fungsi func sebagai penangan klik:

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

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

Mari kita lanjutkan lebih jauh dan buat agar saat mengklik paragraf mana pun, teks dari paragraf tersebut ditampilkan. Namun, ada masalahnya: paragrafnya banyak, tetapi fungsi penangan hanya satu. Bagaimana cara membedakan paragraf-paragraf kita di dalam fungsi penangan?

Objek this akan membantu kita dalam hal ini - saat fungsi dipanggil pada saat peristiwa terjadi, objek ini akan menunjuk ke elemen tempat peristiwa itu terjadi. Mari ubah kode fungsi func kita sesuai dengan yang telah dikatakan:

javascriptfunction func() {
  console.log(this.textContent); // menampilkan teks paragraf
}

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