เหตุการณ์กำหนดเอง
สร้างและส่งเหตุการณ์ของคุณเอง
เหตุการณ์กำหนดเอง เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
นอกเหนือจากเหตุการณ์ที่มีมาให้
DOM ช่วยให้คุณสร้างและส่งเหตุการณ์ของคุณเองได้ด้วย CustomEvent วิธีนี้แยกส่วนต่าง ๆ ของแอปออกจากกัน องค์ประกอบหนึ่งประกาศว่ามีบางอย่างเกิดขึ้น ส่วนองค์ประกอบอื่น ๆ ก็รับฟังได้โดยไม่ต้องอ้างอิงถึงกันโดยตรง
การสร้าง CustomEvent
สร้างอินสแตนซ์ด้วย new CustomEvent(name, options) โดย name จะเป็นสตริงใด ๆ ที่คุณเลือกก็ได้
const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"การส่งเหตุการณ์
ส่งเหตุการณ์ไปยังเป้าหมายด้วย dispatchEvent ตัวรับฟังใด ๆ ที่ลงทะเบียนไว้สำหรับชื่อนั้นบนเป้าหมาย หรือบนองค์ประกอบบรรพบุรุษหากเหตุการณ์ไหลย้อนขึ้น จะทำงาน
element.dispatchEvent(new CustomEvent("cart:add"));การรับฟังเหตุการณ์
รับฟังในลักษณะเดียวกับเหตุการณ์ดั้งเดิม โดยใช้ addEventListener พร้อมชื่อที่กำหนดเองของคุณ
element.addEventListener("cart:add", () => {
console.log("Something was added to the cart");
});การส่งข้อมูลด้วยรายละเอียด
แนบข้อมูลไปกับเหตุการณ์ผ่านพร็อพเพอร์ตี detail ตัวรับฟังจะอ่านข้อมูลดังกล่าวจาก event.detail
const evt = new CustomEvent("cart:add", {
detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);การอ่านข้อมูลที่ส่งไป
ภายในตัวรับฟัง event.detail จะเก็บค่าทุกอย่างที่คุณส่งไป ค่านั้นอาจเป็นค่าใดก็ได้ เช่น ออบเจ็กต์ อาร์เรย์ สตริง หรือตัวเลข
element.addEventListener("cart:add", (e) => {
console.log(e.detail.id, e.detail.qty); // 42 2
});การทำให้เหตุการณ์ไหลย้อนขึ้น
ตามค่าเริ่มต้น เหตุการณ์ที่กำหนดเองจะ NOT ไหลย้อนขึ้น ให้ตั้งค่า bubbles: true เพื่อให้องค์ประกอบบรรพบุรุษและตัวรับฟังแบบมอบหมายสามารถรับฟังเหตุการณ์นั้นได้
const evt = new CustomEvent("cart:add", {
bubbles: true,
detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listenตัวเลือก cancelable
ตั้งค่า cancelable: true เพื่ออนุญาตให้ตัวรับฟังเรียกใช้ preventDefault() ผู้ส่งเหตุการณ์จะตรวจสอบค่าที่ส่งกลับจาก dispatchEvent เพื่อดูว่าเหตุการณ์ถูกยกเลิกหรือไม่
const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();รูปแบบการแยกส่วน
เหตุการณ์ที่กำหนดเองช่วยให้โมดูลสื่อสารกันได้โดยไม่ต้องนำเข้าโมดูลอื่น ระบบบันทึกหรือชั้นวิเคราะห์ข้อมูลสามารถรับฟังเหตุการณ์ทั่วทั้งแอปบน document ได้
document.addEventListener("user:login", (e) => {
analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
new CustomEvent("user:login", { detail: { userId: 7 } })
);หลักการตั้งชื่อ
กำหนดเนมสเปซให้ชื่อเหตุการณ์ เช่น cart:add และ user:login เพื่อหลีกเลี่ยงการชนกับเหตุการณ์ดั้งเดิม และจัดกลุ่มเหตุการณ์ที่เกี่ยวข้องให้เห็นได้ชัดเจน
รูปแบบเก่ากับรูปแบบใหม่
คุณอาจพบ API แบบเก่าอย่าง document.createEvent ในโค้ดรุ่นเก่า ควรเลือกใช้ตัวสร้างสมัยใหม่อย่าง new CustomEvent(...) เพราะเรียบง่ายกว่า และเป็นรูปแบบเดียวที่ควรเขียนในปัจจุบัน
const evt = new CustomEvent("ready", { detail: 1 });ตรวจสอบความเข้าใจ
ตรวจสอบความรู้เกี่ยวกับเหตุการณ์ที่กำหนดเอง
ทบทวน
ใช้ new CustomEvent(name, { detail, bubbles, cancelable }) และ dispatchEvent เพื่อสร้างเหตุการณ์ของคุณเอง อ่านข้อมูลที่ส่งไปผ่าน event.detail เลือกเปิดใช้การไหลย้อนขึ้นเมื่อต้องการมอบหมายเหตุการณ์ และใช้ cancelable กับการกระทำที่ต้องการให้ยกเลิกได้ เหตุการณ์ที่กำหนดเองช่วยแยกองค์ประกอบออกจากกันเป็นรูปแบบเผยแพร่-สมัครรับที่สะอาดและเป็นระเบียบ
คำถามที่พบบ่อย
บทเรียน “เหตุการณ์กำหนดเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เหตุการณ์กำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์กำหนดเอง”
สร้างและส่งเหตุการณ์ของคุณเอง คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เหตุการณ์กำหนดเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ระยะจับเหตุการณ์และระยะ bubbling
- รูปแบบการมอบหมายเหตุการณ์
- รายการแบบไดนามิกด้วยการมอบหมายเหตุการณ์
- เหตุการณ์กำหนดเอง