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

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

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

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

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

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

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

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

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

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

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

ให้ลิงก์และปุ่ม เมื่อกดปุ่ม ให้เพิ่ม เนื้อหาของแอตทริบิวต์ href ของลิงก์เข้าไปในวงเล็บต่อท้ายข้อความของลิงก์ ทำให้การเพิ่มนี้เกิดขึ้นเพียง ครั้งแรกที่กดเท่านั้น

ให้ปุ่มที่มีค่าเป็นตัวเลข 1 ทำให้เมื่อคลิก ปุ่มนี้ ค่าของมันเพิ่มขึ้นทีละหนึ่ง ทุกครั้ง หลังจากที่ค่าของปุ่ม ถึง 10 แล้ว ให้ถอดการผูกตัวจัดการ เหตุการณ์ เพื่อที่ปุ่มจะไม่ตอบสนองต่อการคลิก อีกต่อไป