เหตุการณ์แป้นพิมพ์และเมาส์
จัดการการคลิก การกดแป้น และเหตุการณ์ตัวชี้
เหตุการณ์แป้นพิมพ์และเมาส์ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
กลุ่มเหตุการณ์การป้อนข้อมูล
เหตุการณ์เมาส์และแป้นพิมพ์ช่วยให้คุณสร้างการโต้ตอบที่หลากหลายได้ แต่ละกลุ่มมีชนิดและพร็อพเพอร์ตีของเหตุการณ์เฉพาะทาง
เหตุการณ์การคลิก
click จะเกิดขึ้นเมื่อกดและปล่อยปุ่มหลัก นอกจากนี้ยังเกิดขึ้นเมื่อเปิดใช้งานปุ่มและลิงก์ด้วยแป้นพิมพ์ ทำให้เข้าถึงได้
btn.addEventListener("click", () => {
console.log("activated");
});เหตุการณ์ดับเบิลคลิกและเมนูตามบริบท
dblclick จะเกิดขึ้นเมื่อดับเบิลคลิก และ contextmenu จะเกิดขึ้นเมื่อคลิกขวา ซึ่งมักถูกยกเลิกเพื่อแสดงเมนูที่กำหนดเอง
el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());การกดเมาส์ การปล่อยเมาส์ และการเคลื่อนเมาส์
เหตุการณ์เหล่านี้ให้การควบคุมอย่างละเอียด ได้แก่ การกด การปล่อย และการเคลื่อนที่ ซึ่งเป็นองค์ประกอบพื้นฐานสำหรับการโต้ตอบแบบลาก
box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));mouseenter เทียบกับ mouseover
mouseenter จะไม่แพร่ขึ้นไปยังองค์ประกอบแม่และไม่สนใจขอบเขตขององค์ประกอบลูก ขณะที่ mouseover จะแพร่ขึ้นไปและเกิดขึ้นเมื่อเลื่อนเข้าไปบนองค์ประกอบลูก โดยทั่วไป mouseenter คือสิ่งที่ควรใช้สำหรับการวางเมาส์เหนือ
el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));ปุ่มเมาส์ใด
พร็อพเพอร์ตี button ระบุว่าปุ่มใดเป็นตัวทำให้เกิดเหตุการณ์: 0 คือปุ่มซ้าย 1 คือปุ่มกลาง และ 2 คือปุ่มขวา
el.addEventListener("mousedown", (e) => {
if (e.button === 2) console.log("right button");
});การกดแป้นและการปล่อยแป้น
keydown จะเกิดขึ้นเมื่อแป้นถูกกดลง และจะเกิดซ้ำขณะกดค้างไว้ ส่วน keyup จะเกิดขึ้นเมื่อปล่อยแป้น keypress เลิกใช้งานแล้ว
input.addEventListener("keydown", (e) => {
console.log("down: " + e.key);
});event.key
e.key คือค่าตามความหมายของแป้น เช่น อักขระอย่าง "a" หรือชื่ออย่าง "Enter", "Escape" หรือ "ArrowUp"
input.addEventListener("keydown", (e) => {
if (e.key === "Escape") console.log("cancel");
});event.code
e.code คือตำแหน่งทางกายภาพของแป้น เช่น "KeyA" หรือ "Space" โดยไม่ขึ้นกับรูปแบบแป้นพิมพ์ ให้ใช้สิ่งนี้สำหรับการควบคุมเกม
window.addEventListener("keydown", (e) => {
if (e.code === "Space") console.log("jump");
});แป้นพิมพ์ลัด
รวมแฟล็กตัวปรับแต่งเข้ากับ key เพื่อตรวจหาแป้นพิมพ์ลัด และเรียกใช้ preventDefault เพื่อแทนที่การทำงานเริ่มต้นของเบราว์เซอร์
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("save");
}
});การทำซ้ำสำหรับแป้นที่กดค้าง
e.repeat จะเป็น true เมื่อ keydown เกิดขึ้นเนื่องจากกำลังกดแป้นค้างไว้ จึงช่วยให้คุณละเว้นการทำซ้ำอัตโนมัติได้
window.addEventListener("keydown", (e) => {
if (e.repeat) return;
console.log("first press of " + e.key);
});ตรวจสอบอย่างรวดเร็ว
เลือกพร็อพเพอร์ตีที่ไม่ขึ้นกับรูปแบบแป้นพิมพ์
สรุปทบทวน
เหตุการณ์เมาส์ประกอบด้วย click, dblclick, mousedown/mouseup/mousemove และ mouseenter/mouseleave ที่เหมาะสำหรับการวางเมาส์เหนือ โดย button ใช้ระบุว่าปุ่มใดเป็นตัวทำให้เกิดเหตุการณ์ เหตุการณ์แป้นพิมพ์ใช้ keydown/keyup โดย e.key ใช้ระบุอักขระหรือชื่อแป้น e.code ใช้ระบุแป้นทางกายภาพ และ e.repeat ใช้ระบุแป้นที่กดค้าง
คำถามที่พบบ่อย
บทเรียน “เหตุการณ์แป้นพิมพ์และเมาส์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เหตุการณ์แป้นพิมพ์และเมาส์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน addEventListener
- ออบเจ็กต์เหตุการณ์
- preventDefault และ stopPropagation
- เหตุการณ์แป้นพิมพ์และเมาส์