การถอดการผูกเหตุการณ์ใน JavaScript

ในบทเรียนนี้เราจะเรียนรู้วิธีถอดการผูก ตัวจัดการเหตุการณ์ที่เราได้ผูกไว้ก่อนหน้านี้ กับองค์ประกอบต่างๆ สำหรับตัวอย่าง ให้นี่คือ ปุ่มต่อไปนี้:

html<input id="button" type="submit">

ลองผูกฟังก์ชัน func กับปุ่มนี้:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

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

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

โดยทั่วไป นี่หมายความว่าตัวจัดการเหตุการณ์ ถูกถอดการผูกในลักษณะเดียวกับที่ถูกผูก นั่นคือ ถ้าเราผูกมันแบบนี้: addEventListener('click', func) การถอดการผูกก็จะใช้พารามิเตอร์เดียวกัน แบบนี้: removeEventListener('click', func)

ดังนั้น มาทำให้งานที่เราตั้งไว้สำเร็จ:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}