การส่งต่อเหตุการณ์ด้วย on:click
ส่งเหตุการณ์ของคอมโพเนนต์ต่อไปยังคอมโพเนนต์แม่โดยใช้คำสั่ง on: แบบไม่มีตัวปรับแต่ง
การส่งต่อเหตุการณ์ด้วย on:click เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การส่งต่อเหตุการณ์
หากต้องการส่งเหตุการณ์ขององค์ประกอบลูกขึ้นไปผ่านคอมโพเนนต์ของคุณอีกครั้ง ให้เขียน on:event โดยไม่ใส่ตัวจัดการ
การส่งต่อพื้นฐาน
วิธีนี้จะส่งต่อการคลิกของปุ่มด้านในไปยังผู้ใช้คอมโพเนนต์ MyButton
<button on:click>Click</button>การรับฟังในฐานะคอมโพเนนต์แม่
คอมโพเนนต์แม่รับฟังคอมโพเนนต์ด้วยวิธีเดียวกับองค์ประกอบ DOM
<MyButton on:click={handle} />ส่งต่อหลายเหตุการณ์
คุณสามารถส่งต่อเหตุการณ์มาตรฐานได้มากเท่าที่ต้องการ
<input on:input on:focus on:blur />คอมโพเนนต์ห่อหุ้มมีประโยชน์
รูปแบบนี้จำเป็นสำหรับการสร้างคอมโพเนนต์ห่อหุ้ม เช่น ปุ่ม อินพุต และลิงก์
ใช้ร่วมกับเหตุการณ์กำหนดเอง
คุณสามารถผสมเหตุการณ์ DOM ที่ส่งต่อกับเหตุการณ์จาก createEventDispatcher ของคุณเองได้อย่างอิสระ
คงออบเจ็กต์เหตุการณ์ไว้
เหตุการณ์ที่ส่งต่อจะมาถึงคอมโพเนนต์แม่พร้อมออบเจ็กต์ Event ของ DOM เดิมที่ยังคงสมบูรณ์
ไม่จำเป็นต้องใช้ตัวปรับแต่ง
หากต้องการให้คอมโพเนนต์แม่ควบคุมตัวปรับแต่ง ให้ตัดตัวปรับแต่งออกจากคอมโพเนนต์ลูก
ความแตกต่างจากเหตุการณ์กำหนดเอง
การส่งต่อจะส่งเหตุการณ์ DOM จริงอีกครั้ง ส่วนการส่งเหตุการณ์กำหนดเองจะสร้างเหตุการณ์ใหม่
รองรับ TypeScript
เหตุการณ์ที่ส่งต่อจะคงชนิดที่แม่นยำไว้ เมื่อคอมโพเนนต์แม่ประกาศชนิดเหล่านั้นใน TypeScript
การใช้งานจริง
คอมโพเนนต์ของระบบการออกแบบส่วนใหญ่ใช้การส่งต่อ เพื่อคงความยืดหยุ่นโดยไม่ต้องระบุพร็อพทุกตัว
ตรวจสอบความเข้าใจ
on:click ที่ไม่มีตัวจัดการทำอะไร
สรุป
คำสั่ง on:event ที่ไม่มีตัวจัดการจะส่งต่อเหตุการณ์ DOM ขึ้นไปยังคอมโพเนนต์แม่ของคุณ ทำให้สร้างส่วนเชื่อมต่อของคอมโพเนนต์ห่อหุ้มได้อย่างสะอาด
คำถามที่พบบ่อย
บทเรียน “การส่งต่อเหตุการณ์ด้วย on:click” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การส่งต่อเหตุการณ์ด้วย on:click” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การส่งต่อเหตุการณ์ด้วย on:click”
ส่งเหตุการณ์ของคอมโพเนนต์ต่อไปยังคอมโพเนนต์แม่โดยใช้คำสั่ง on: แบบไม่มีตัวปรับแต่ง คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การส่งต่อเหตุการณ์ด้วย on:click” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- on:click on:input on:submit
- ตัวปรับแต่งเหตุการณ์: preventDefault stopPropagation once
- เหตุการณ์กำหนดเองด้วย createEventDispatcher
- การส่งต่อเหตุการณ์ด้วย on:click