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

ตอนนี้สมมติว่าเรามีไม่ใช่แค่หนึ่งองค์ประกอบ แต่มีหลายอัน ตัวอย่างเช่น หลายย่อหน้า:

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

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

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

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

function func() {
	console.log(this.textContent);
}

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

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

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

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

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // ยกเลิกการผูกตัวจัดการ
}

มีย่อหน้าให้ เมื่อคลิกที่ย่อหน้าใดๆ ให้เพิ่มเครื่องหมายอัศเจรีย์ที่ส่วนท้ายของมัน ทำให้การเพิ่มนี้เกิดขึ้น เฉพาะครั้งแรกที่คลิกเท่านั้น