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

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

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

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

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

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

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

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

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

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

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

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