การเพิ่มตัวจัดการเหตุการณ์ในลูปด้วย JavaScript

ตอนนี้เรามาเรียนรู้วิธีเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบหลายๆ องค์ประกอบพร้อมกัน ตัวอย่างเช่น สมมติว่าเรามีย่อหน้าดังนี้:

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;
}