preventDefault และ stopPropagation
ควบคุมพฤติกรรมเริ่มต้นและการส่งต่อเหตุการณ์แบบ bubbling
preventDefault และ stopPropagation เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การควบคุมพฤติกรรมเหตุการณ์
มีกลไกสองอย่างที่ช่วยให้คุณควบคุมเหตุการณ์ได้ ได้แก่ การหยุดการทำงานเริ่มต้นของเบราว์เซอร์ และการหยุดไม่ให้เหตุการณ์เดินทางผ่าน DOM
การทำงานเริ่มต้น
องค์ประกอบจำนวนมากมีพฤติกรรมเริ่มต้นในตัว เช่น ลิงก์จะนำทาง แบบฟอร์มจะส่งข้อมูลและโหลดหน้าใหม่ และช่องทำเครื่องหมายจะสลับสถานะ พฤติกรรมเหล่านี้จะเกิดขึ้นเว้นแต่คุณจะเข้าไปควบคุม
preventDefault
event.preventDefault ยกเลิกการทำงานเริ่มต้นของเบราว์เซอร์ แต่ยังคงให้ฟังก์ชันจัดการของคุณทำงานต่อ
link.addEventListener("click", (e) => {
e.preventDefault(); // stop navigation
console.log("handled in JS");
});preventDefault กับแบบฟอร์ม
การใช้งานที่พบบ่อยคือหยุดไม่ให้แบบฟอร์มโหลดหน้าใหม่ เพื่อให้คุณจัดการการส่งข้อมูลด้วย JavaScript ได้
form.addEventListener("submit", (e) => {
e.preventDefault();
// send data via fetch instead
});การส่งต่อเหตุการณ์
หลังจากถึงเป้าหมายแล้ว เหตุการณ์จะ ไหลย้อนกลับขึ้นด้านบน ผ่านองค์ประกอบบรรพบุรุษและเรียกใช้ตัวรับฟังเหตุการณ์ขององค์ประกอบเหล่านั้น นี่คือเหตุผลที่การคลิกองค์ประกอบลูกอาจเรียกใช้ฟังก์ชันจัดการขององค์ประกอบแม่ได้
stopPropagation
event.stopPropagation ป้องกันไม่ให้เหตุการณ์เดินทางต่อไปยังองค์ประกอบบรรพบุรุษ ฟังก์ชันจัดการปัจจุบันยังคงทำงานจนเสร็จ
child.addEventListener("click", (e) => {
e.stopPropagation(); // parent listeners will not fire
});preventDefault เทียบกับ stopPropagation
ทั้งสองอย่างเป็นอิสระต่อกัน preventDefault ยกเลิกการทำงานของเบราว์เซอร์ ส่วน stopPropagation ยกเลิกการเดินทางของเหตุการณ์ไปยังองค์ประกอบอื่น คุณอาจใช้อย่างใดอย่างหนึ่ง ใช้ทั้งสองอย่าง หรือไม่ใช้เลยก็ได้
e.preventDefault(); // no default action
e.stopPropagation(); // no bubblingตัวรับฟังเหตุการณ์อื่นในองค์ประกอบเดียวกัน
stopPropagation จะไม่หยุดตัวรับฟังเหตุการณ์อื่นในองค์ประกอบเดียวกันไม่ให้ทำงาน ตัวรับฟังเหล่านั้นยังคงทำงานตามปกติ
el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));stopImmediatePropagation
stopImmediatePropagation ทำงานมากกว่าเดิม โดยหยุดทั้งการไหลย้อนกลับขึ้นด้านบนและป้องกันไม่ให้ตัวรับฟังเหตุการณ์ที่เหลือในองค์ประกอบเดียวกันทำงาน
el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));defaultPrevented
คุณสามารถตรวจสอบ event.defaultPrevented เพื่อดูว่า preventDefault ถูกเรียกใช้โดยฟังก์ชันจัดการก่อนหน้านี้แล้วหรือไม่
el.addEventListener("click", (e) => {
console.log(e.defaultPrevented);
});ใช้อย่างพอเหมาะ
การหยุดการส่งต่อเหตุการณ์อาจทำให้การมอบหมายเหตุการณ์ส่วนอื่นของหน้าใช้งานไม่ได้ ควรใช้เมื่อจำเป็นจริง ๆ เท่านั้น และพิจารณาทางเลือกที่ยังรองรับการมอบหมายเหตุการณ์
ตรวจสอบความเข้าใจ
เลือกเมธอดที่ถูกต้อง
สรุปทบทวน
preventDefault ยกเลิกการทำงานเริ่มต้นของเบราว์เซอร์ (การนำทาง การส่งแบบฟอร์ม และอื่น ๆ) stopPropagation หยุดไม่ให้เหตุการณ์ไหลย้อนกลับไปยังองค์ประกอบบรรพบุรุษ ขณะที่ stopImmediatePropagation ยังป้องกันตัวรับฟังเหตุการณ์อื่นในองค์ประกอบเดียวกันด้วย ทั้งสองเป็นเครื่องมือที่ทำงานแยกจากกัน ควรใช้การหยุดการส่งต่อเหตุการณ์อย่างพอเหมาะ เพื่อไม่ให้การมอบหมายเหตุการณ์เสียหาย
คำถามที่พบบ่อย
บทเรียน “preventDefault และ stopPropagation” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “preventDefault และ stopPropagation” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “preventDefault และ stopPropagation”
ควบคุมพฤติกรรมเริ่มต้นและการส่งต่อเหตุการณ์แบบ bubbling คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “preventDefault และ stopPropagation” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน addEventListener
- ออบเจ็กต์เหตุการณ์
- preventDefault และ stopPropagation
- เหตุการณ์แป้นพิมพ์และเมาส์