Menambah Penangan dalam Gelung di JavaScript

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

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

Katakan juga kita mempunyai fungsi:

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

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

let 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:

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

Diberi fungsi berikut:

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

Diberi juga input. Buat supaya apabila kehilangan fokus dalam mana-mana input kita, fungsi di atas dilaksanakan.

Diberi perenggan dengan nombor. Buat supaya apabila mana-mana perenggan diklik, nombor di dalamnya dikuasakan dua.