ออบเจ็กต์เหตุการณ์
อ่านรายละเอียดเหตุการณ์ เช่น target และ type
ออบเจ็กต์เหตุการณ์ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
อาร์กิวเมนต์เหตุการณ์
เมื่อเหตุการณ์เกิดขึ้น เบราว์เซอร์จะส่ง ออบเจ็กต์เหตุการณ์ ไปยังฟังก์ชันจัดการของคุณ ออบเจ็กต์นี้มีรายละเอียดเกี่ยวกับสิ่งที่เกิดขึ้นและองค์ประกอบที่เกี่ยวข้อง
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
event.type คือชื่อของเหตุการณ์ ทำให้ฟังก์ชันจัดการเดียวกันตอบสนองต่อประเภทเหตุการณ์ต่าง ๆ ได้แตกต่างกัน
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
event.target คือองค์ประกอบที่เหตุการณ์เริ่มต้นขึ้นจริง หรือองค์ประกอบชั้นในสุดที่ผู้ใช้โต้ตอบด้วย
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
event.currentTarget คือองค์ประกอบที่ตัวรับฟังเหตุการณ์กำลังทำงานอยู่ หรือองค์ประกอบที่คุณเรียกใช้ addEventListener ด้วย
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});target เทียบกับ currentTarget
เมื่อเหตุการณ์ไหลย้อนกลับขึ้นด้านบน target อาจเป็นองค์ประกอบลูก ขณะที่ currentTarget เป็นองค์ประกอบแม่ที่กำลังรับฟังอยู่ ความแตกต่างนี้เป็นพื้นฐานของการมอบหมายเหตุการณ์
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});การมอบหมายเหตุการณ์
ผูกตัวรับฟังเหตุการณ์เพียงตัวเดียวไว้กับองค์ประกอบแม่ แล้วใช้ target.closest เพื่อค้นหาว่าองค์ประกอบลูกใดเป็นผู้รับการกระทำ วิธีนี้รองรับการขยายระบบได้ดีกว่าการใช้ตัวรับฟังเหตุการณ์จำนวนมาก
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
event.timeStamp บันทึกเวลาที่สร้างเหตุการณ์ ซึ่งมีประโยชน์สำหรับวัดช่วงเวลาระหว่างเหตุการณ์
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});พิกัดในเหตุการณ์เมาส์
เหตุการณ์เมาส์จะเพิ่มข้อมูลตำแหน่ง เช่น clientX/clientY (สัมพันธ์กับพื้นที่แสดงผล) และ pageX/pageY (สัมพันธ์กับเอกสาร)
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});แป้นปรับเปลี่ยน
พร็อพเพอร์ตีอย่าง e.shiftKey, e.ctrlKey, e.altKey และ e.metaKey ระบุว่าแป้นปรับเปลี่ยนใดกำลังถูกกดค้างอยู่
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
event.isTrusted จะเป็น true สำหรับเหตุการณ์ที่ผู้ใช้สร้างขึ้นจริง และเป็น false สำหรับเหตุการณ์ที่สคริปต์สร้างขึ้น ช่วยให้แยกแยะข้อมูลนำเข้าที่มาจากผู้ใช้จริงได้
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});การอ่านแป้นที่กด
เหตุการณ์แป้นพิมพ์จะแสดง e.key (อักขระหรือชื่อแป้น) เพื่อให้คุณตอบสนองต่อแป้นเฉพาะได้
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});ตรวจสอบความเข้าใจ
แยกความแตกต่างระหว่างเป้าหมายทั้งสอง
สรุปทบทวน
ออบเจ็กต์เหตุการณ์อธิบายเหตุการณ์นั้น ได้แก่ type, target (จุดเริ่มต้นของเหตุการณ์) และ currentTarget (จุดที่ตัวรับฟังเหตุการณ์ทำงาน) ความแตกต่างระหว่างสองค่านี้ทำให้เกิดการมอบหมายเหตุการณ์ เหตุการณ์ยังมีพิกัด แป้นปรับเปลี่ยน key, timeStamp และ isTrusted ให้ใช้งานด้วย
คำถามที่พบบ่อย
บทเรียน “ออบเจ็กต์เหตุการณ์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ออบเจ็กต์เหตุการณ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ออบเจ็กต์เหตุการณ์”
อ่านรายละเอียดเหตุการณ์ เช่น target และ type คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ออบเจ็กต์เหตุการณ์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน addEventListener
- ออบเจ็กต์เหตุการณ์
- preventDefault และ stopPropagation
- เหตุการณ์แป้นพิมพ์และเมาส์