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

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

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

และสมมติว่าเรามีฟังก์ชัน:

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

มาทำการวนลูปผ่านย่อหน้าทั้งหมดของเราและเพิ่มฟังก์ชัน func เป็นตัวจัดการการคลิกให้กับแต่ละย่อหน้ากัน:

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

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

มาดูขั้นต่อไปและทำให้ เมื่อคลิกที่ย่อหน้าใดๆ ก็ตามจะแสดง ข้อความของย่อหน้านั้นออกมา อย่างไรก็ตาม มีปัญหาอยู่หนึ่ง: มีหลายย่อหน้า แต่มีฟังก์ชันตัวจัดการเพียงฟังก์ชันเดียว แล้วเราจะแยกแยะย่อหน้าต่างๆ ภายในฟังก์ชันตัวจัดการได้อย่างไร?

วัตถุ this จะช่วยเราได้ในเรื่องนี้ - เมื่อ เรียกใช้ฟังก์ชันในขณะเกิดเหตุการณ์ วัตถุนี้ จะชี้ไปยังองค์ประกอบที่เหตุการณ์นั้น เกิดขึ้น มาแก้ไขโค้ดของฟังก์ชัน func ของเรา ตามที่กล่าวมาข้างต้น:

function func() {
	console.log(this.textContent); // แสดงข้อความของย่อหน้า
}

กำหนดฟังก์ชันต่อไปนี้:

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

และกำหนดให้มีอินพุตหลายช่อง จงทำให้ เมื่อสูญเสียโฟกัสในอินพุตใดๆ ของเรา ฟังก์ชัน ที่ระบุไว้ด้านบนจะถูกดำเนินการ

กำหนดให้มีย่อหน้าที่มีตัวเลข จงทำให้ เมื่อคลิกที่ย่อหน้าใดๆ ตัวเลขในย่อหน้านั้นถูกยกกำลังสอง