addEventListener และออบเจ็กต์เหตุการณ์
ผูกตัวรับฟังเหตุการณ์ รับออบเจ็กต์ Event ใช้ preventDefault และ stopPropagation และทำความเข้าใจการกระจายเหตุการณ์ขึ้นไป
addEventListener และออบเจ็กต์เหตุการณ์ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุการณ์คืออะไร
เหตุการณ์คือสัญญาณที่เบราว์เซอร์ส่งออกมาเมื่อบางสิ่งเกิดขึ้น เช่น ผู้ใช้คลิก กดแป้น พาเมาส์เคลื่อนที่ หน้าเว็บโหลดเสร็จ หรือคำขอเครือข่ายเสร็จสมบูรณ์ JavaScript ตอบสนองต่อเหตุการณ์ด้วยการติดตั้ง ตัวรับฟังเหตุการณ์
ไวยากรณ์ของ addEventListener
element.addEventListener(type, handler) ผูกฟังก์ชันให้ทำงานเมื่อเหตุการณ์เกิดขึ้น ตัวจัดการจะได้รับอ็อบเจ็กต์เหตุการณ์ Event ซึ่งมีรายละเอียดเกี่ยวกับสิ่งที่เกิดขึ้น
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});ประเภทเหตุการณ์ที่พบบ่อย
เมาส์: click, dblclick, mouseenter, mouseleave, mousemove แป้นพิมพ์: keydown, keyup, keypress แบบฟอร์ม: submit, input, change, focus, blur เอกสาร: DOMContentLoaded, load หน้าต่าง: resize, scroll
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));อ็อบเจ็กต์เหตุการณ์
ตัวจัดการทุกตัวจะได้รับอ็อบเจ็กต์เหตุการณ์ คุณสมบัติสำคัญ ได้แก่ e.target (องค์ประกอบที่ทำให้เกิดเหตุการณ์), e.currentTarget (องค์ประกอบที่ติดตั้งตัวรับฟัง), e.type (ชื่อเหตุการณ์) และ e.timeStamp
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() หยุดการทำงานเริ่มต้นของเบราว์เซอร์ ใช้เพื่อป้องกันการส่งแบบฟอร์ม ป้องกันการนำทางของลิงก์ หรือปิดเมนูบริบทจากการคลิกขวาในเกม
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() หยุดไม่ให้เหตุการณ์แพร่ขึ้นไปตามต้นไม้ DOM ใช้เมื่อไม่ต้องการให้ตัวจัดการขององค์ประกอบด้านในเรียกใช้ตัวจัดการขององค์ประกอบด้านนอก
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});การแพร่ของเหตุการณ์
เหตุการณ์จะแพร่ขึ้นด้านบน หลังจากเกิดขึ้นที่เป้าหมายแล้ว จะเกิดขึ้นที่องค์ประกอบแม่ จากนั้นองค์ประกอบปู่ และต่อไปจนถึง document นี่คือวิธีการทำงานของการมอบหมายเหตุการณ์ โดยติดตั้งตัวรับฟังเพียงหนึ่งตัวไว้ที่องค์ประกอบแม่ แล้วใช้ e.target เพื่อระบุองค์ประกอบลูกที่ถูกคลิกจริง
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});รูปแบบการมอบหมายเหตุการณ์
การมอบหมายเหตุการณ์คือการรับฟังเหตุการณ์ที่องค์ประกอบแม่ แทนการติดตั้งตัวรับฟังให้กับองค์ประกอบลูกทุกตัว วิธีนี้มีประสิทธิภาพมากกว่าและรองรับองค์ประกอบลูกที่เพิ่มเข้ามาแบบไดนามิกโดยอัตโนมัติ
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});เหตุการณ์จากแป้นพิมพ์
เหตุการณ์จากแป้นพิมพ์จะเกิดขึ้นเมื่อมีการกดแป้น ใช้ e.key (สตริง เช่น 'Enter', 'Escape', 'a') ในโค้ดสมัยใหม่ โค้ดเก่าใช้ e.keyCode ซึ่งเลิกแนะนำให้ใช้แล้ว ส่วน e.metaKey, e.ctrlKey และ e.shiftKey ใช้ตรวจจับแป้นปรับแต่ง
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});การนำตัวรับฟังเหตุการณ์ออก
ใช้ removeEventListener เพื่อถอดตัวรับฟังเหตุการณ์ ตัวจัดการต้องเป็นการอ้างอิงฟังก์ชันเดียวกัน ฟังก์ชันนิรนามไม่สามารถนำออกได้ โดยทั่วไปใน React/Vue คุณไม่ต้องจัดการเรื่องนี้ด้วยตนเอง
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);ตัวเลือก once
ส่ง { once: true } เป็นอาร์กิวเมนต์ตัวที่สาม เพื่อให้ระบบนำตัวรับฟังเหตุการณ์ออกโดยอัตโนมัติหลังจากทำงานครั้งเดียว มีประโยชน์สำหรับการทำงานแบบครั้งเดียว เช่น การปิดหน้าจอเริ่มต้น
document.querySelector('#start').addEventListener('click', startApp, { once: true });ตัวเลือก capture
โดยค่าเริ่มต้น ตัวรับฟังเหตุการณ์จะทำงานในระยะการแพร่ขึ้นด้านบน ส่ง { capture: true } เพื่อให้ทำงานในระยะการดักจับ ซึ่งเป็นการแพร่ลงด้านล่างก่อนถึงตัวรับฟังของเป้าหมายเอง
ตรวจสอบอย่างรวดเร็ว
เมธอดใดหยุดไม่ให้เบราว์เซอร์ทำงานเริ่มต้นของเหตุการณ์?
ทบทวน: เหตุการณ์ DOM
addEventListener(type, handler) ใช้ติดตั้งตัวรับฟัง อ็อบเจ็กต์ Event มี target, type และเมธอดสำหรับควบคุม preventDefault() ปิดกั้นการทำงานเริ่มต้น stopPropagation() หยุดการแพร่ ใช้การมอบหมายเหตุการณ์เพื่อประสิทธิภาพและรองรับองค์ประกอบลูกแบบไดนามิก นำตัวรับฟังออกเพื่อป้องกันหน่วยความจำรั่ว
คำถามที่พบบ่อย
บทเรียน “addEventListener และออบเจ็กต์เหตุการณ์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “addEventListener และออบเจ็กต์เหตุการณ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “addEventListener และออบเจ็กต์เหตุการณ์”
ผูกตัวรับฟังเหตุการณ์ รับออบเจ็กต์ Event ใช้ preventDefault และ stopPropagation และทำความเข้าใจการกระจายเหตุการณ์ขึ้นไป คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “addEventListener และออบเจ็กต์เหตุการณ์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- querySelector และ querySelectorAll
- addEventListener และออบเจ็กต์เหตุการณ์
- การเปลี่ยนเนื้อหา: textContent innerHTML classList
- การสร้างและต่อท้ายองค์ประกอบ