พื้นฐาน addEventListener
ผูกตัวจัดการกับองค์ประกอบเพื่อรับเหตุการณ์
พื้นฐาน addEventListener เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตอบสนองต่อเหตุการณ์
เหตุการณ์ช่วยให้โค้ดตอบสนองต่อการกระทำของผู้ใช้ เช่น การคลิก การกดแป้น และการส่งแบบฟอร์ม โดย addEventListener เป็นวิธีมาตรฐานสำหรับสมัครรับเหตุการณ์
ไวยากรณ์พื้นฐาน
เรียกใช้ addEventListener พร้อมชื่อเหตุการณ์และฟังก์ชันจัดการ ฟังก์ชันจัดการจะทำงานทุกครั้งที่เกิดเหตุการณ์
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
console.log("Clicked!");
});ฟังก์ชันจัดการที่มีชื่อ
คุณสามารถส่งฟังก์ชันที่มีชื่อได้ วิธีนี้ช่วยจัดระเบียบโค้ด และที่สำคัญคือทำให้คุณลบตัวรับฟังเหตุการณ์ภายหลังได้
function handleClick() {
console.log("Clicked!");
}
btn.addEventListener("click", handleClick);ตัวรับฟังเหตุการณ์หลายตัว
ต่างจากพร็อพเพอร์ตี onclick แบบเก่า คุณสามารถผูกตัวรับฟังเหตุการณ์หลายตัวกับเหตุการณ์เดียวกันได้โดยไม่เขียนทับกัน
btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);removeEventListener
หากต้องการหยุดรับฟัง ให้เรียกใช้ removeEventListener โดยใช้ชื่อเหตุการณ์และการอ้างอิงฟังก์ชัน เดียวกันกับที่ใช้เพิ่มตัวรับฟังเหตุการณ์
btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);ฟังก์ชันไม่ระบุชื่อไม่สามารถลบได้
ฟังก์ชันลูกศรที่เขียนไว้ภายในจะสร้างการอ้างอิงใหม่ทุกครั้ง จึงไม่สามารถลบภายหลังได้ หากต้องการลบ ให้ใช้การอ้างอิงที่มีชื่อ
btn.addEventListener("click", () => doThing());
// no way to remove this exact listenerตัวเลือกการทำงานครั้งเดียว
การส่ง { once: true } จะลบตัวรับฟังเหตุการณ์โดยอัตโนมัติหลังจากทำงานเพียงครั้งเดียว
btn.addEventListener("click", init, { once: true });ตัวเลือกการดักจับ
โดยค่าเริ่มต้น ตัวรับฟังเหตุการณ์จะทำงานในระยะการไหลย้อนกลับขึ้นด้านบน ส่วน { capture: true } จะทำให้ทำงานในระยะการดักจับแทน
parent.addEventListener("click", handler, { capture: true });ตัวเลือกแบบไม่แทรกแซง
{ passive: true } เป็นการรับรองว่าคุณจะไม่เรียกใช้ preventDefault ทำให้เบราว์เซอร์เพิ่มประสิทธิภาพการเลื่อนหน้าได้
window.addEventListener("scroll", onScroll, { passive: true });ตัวเลือกสัญญาณ
สัญญาณของ AbortController ช่วยให้คุณลบตัวรับฟังเหตุการณ์หนึ่งตัวหรือหลายตัวได้ด้วยการยกเลิกการทำงาน เหมาะสำหรับการเก็บกวาดทรัพยากร
const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listenerthis ภายในฟังก์ชันจัดการ
ในฟังก์ชันจัดการทั่วไป this จะอ้างอิงถึงองค์ประกอบที่ผูกตัวรับฟังเหตุการณ์ไว้ ส่วนฟังก์ชันลูกศรจะไม่กำหนดค่า this ใหม่
btn.addEventListener("click", function () {
console.log(this); // the button element
});ตรวจสอบความเข้าใจ
ทดสอบกฎการลบ
สรุปทบทวน
addEventListener(type, handler, options) สมัครรับเหตุการณ์และรองรับตัวรับฟังเหตุการณ์หลายตัว ลบตัวรับฟังเหตุการณ์ด้วย removeEventListener โดยใช้การอ้างอิงเดียวกัน ดังนั้นควรเลือกใช้ฟังก์ชันที่มีชื่อ ตัวเลือกที่มีประโยชน์ ได้แก่ once, capture, passive และ signal ในฟังก์ชันจัดการทั่วไป this คือองค์ประกอบเป้าหมาย
คำถามที่พบบ่อย
บทเรียน “พื้นฐาน addEventListener” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พื้นฐาน addEventListener” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน addEventListener”
ผูกตัวจัดการกับองค์ประกอบเพื่อรับเหตุการณ์ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “พื้นฐาน addEventListener” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน addEventListener
- ออบเจ็กต์เหตุการณ์
- preventDefault และ stopPropagation
- เหตุการณ์แป้นพิมพ์และเมาส์