Vue Academy · บทเรียน

ตัวปรับแต่งเหตุการณ์ v-on

.stop, .prevent, .self, .once, .capture, .passive — ควรใช้ตัวปรับแต่งแต่ละแบบเมื่อใดและเพราะเหตุใด

บทเรียน 2 จาก 413 ขั้นตอน

ตัวปรับแต่งเหตุการณ์ v-on เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การจัดการเหตุการณ์ที่กระชับขึ้น

คำสั่ง v-on (รูปแบบย่อคือ @) ใช้ผูกตัวรับฟังเหตุการณ์ ตัวปรับแต่งเหตุการณ์คือส่วนต่อท้ายที่จัดการงานทั่วไปของ DOM เช่น การหยุดการแพร่เหตุการณ์หรือการป้องกันการทำงานเริ่มต้น ทำให้ตัวจัดการของคุณมุ่งเน้นที่ตรรกะได้

ปัญหาที่ตัวปรับแต่งช่วยแก้

หากไม่มีตัวปรับแต่ง คุณจะต้องใส่โค้ดพื้นฐานของ DOM ไว้ในตัวจัดการ เช่น เรียกใช้ event.preventDefault() หรือ event.stopPropagation() ตัวปรับแต่งจะย้ายงานเหล่านี้ไปไว้ในแม่แบบในรูปแบบการประกาศ

.stop สำหรับ stopPropagation

.stop จะหยุดไม่ให้เหตุการณ์แพร่ขึ้นไปยังองค์ประกอบแม่ ซึ่งเทียบเท่ากับการเรียกใช้ event.stopPropagation()

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent สำหรับ preventDefault

.prevent จะเรียกใช้ event.preventDefault() การใช้งานที่พบบ่อยคือป้องกันไม่ให้แบบฟอร์มโหลดหน้าเว็บใหม่เมื่อส่งแบบฟอร์ม

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

การเชื่อมตัวปรับแต่ง

คุณสามารถใช้ตัวปรับแต่งร่วมกันได้ ลำดับมีความสำคัญ เพราะตัวปรับแต่งจะทำงานจากซ้ายไปขวา

<a @click.stop.prevent="onClick">Link</a>

.self: เฉพาะองค์ประกอบนั้นเอง

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

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

ตัวปรับแต่งปุ่ม

สำหรับเหตุการณ์จากแป้นพิมพ์ คุณสามารถรับฟังปุ่มเฉพาะรายการได้ @keyup.enter จะทำงานเฉพาะเมื่อปล่อยปุ่ม Enter

<input @keyup.enter="search" />

ตัวปรับแต่งปุ่มเพิ่มเติม

Vue มีชื่อแทนสำหรับปุ่มที่ใช้บ่อย ได้แก่ .enter, .esc, .tab, .delete, .space และปุ่มลูกศร เช่น .up กับ .down

<input @keyup.esc="cancel" @keyup.up="previous" />

.once: เรียกใช้ตัวจัดการเพียงครั้งเดียว

.once จะเรียกใช้ตัวจัดการไม่เกินหนึ่งครั้ง แล้วจึงนำตัวรับฟังออก เหมาะสำหรับการทำงานครั้งเดียว เช่น การปิดข้อความต้อนรับ

<button @click.once="initialize">Start</button>

.passive เพื่อประสิทธิภาพการเลื่อน

.passive แจ้งเบราว์เซอร์ว่าตัวจัดการจะไม่เรียกใช้ preventDefault() ทำให้เบราว์เซอร์เลื่อนได้อย่างราบรื่นโดยไม่ต้องรอ จึงช่วยเพิ่มประสิทธิภาพของเหตุการณ์สัมผัสและการเลื่อน

<div @scroll.passive="onScroll">...</div>

การเลือกตัวปรับแต่งที่เหมาะสม

.stop — หยุดการแพร่เหตุการณ์
.prevent — ป้องกันการทำงานเริ่มต้น
.self — ไม่สนใจเหตุการณ์จากองค์ประกอบลูกที่แพร่ขึ้นมา
.once — ทำงานครั้งเดียว
.passive — ไม่ป้องกันการทำงานเริ่มต้น เหมาะกับประสิทธิภาพการเลื่อนมากกว่า

หมายเหตุ: อย่าใช้ .passive ร่วมกับ .prevent เพราะทั้งสองมีหน้าที่ขัดแย้งกัน

ตรวจสอบความเข้าใจ

เลือกตัวปรับแต่งที่เหมาะสม

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

ตัวปรับแต่งเหตุการณ์ช่วยให้ตัวจัดการสะอาดและกระชับ:

.stop = stopPropagation, .prevent = preventDefault
.self จะทำงานเฉพาะบนองค์ประกอบนั้นเอง
ตัวปรับแต่งปุ่ม เช่น .enter ใช้กำหนดเป้าหมายให้ปุ่มเฉพาะรายการ
.once จะเรียกใช้ตัวจัดการหนึ่งครั้ง ส่วน .passive ช่วยเพิ่มประสิทธิภาพการเลื่อน

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ตัวปรับแต่งเหตุการณ์ v-on” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวปรับแต่งเหตุการณ์ v-on” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวปรับแต่งเหตุการณ์ v-on”

.stop, .prevent, .self, .once, .capture, .passive — ควรใช้ตัวปรับแต่งแต่ละแบบเมื่อใดและเพราะเหตุใด คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวปรับแต่งเหตุการณ์ v-on” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

v-model: กลไกภายในของการผูกข้อมูลสองทาง
ตัวปรับแต่งเหตุการณ์ v-on
การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind
การเขียนคำสั่งแบบกำหนดเอง

← กลับไปที่ Vue Academy