พื้นฐานการทำงานกับออบเจ็กต์ Event ใน JavaScript
ในบทเรียนนี้ เราจะศึกษาพื้นฐานการทำงาน
กับออบเจ็กต์ Event ออบเจ็กต์นี้ประกอบด้วย
ข้อมูลเกี่ยวกับเหตุการณ์ที่เกิดขึ้น
ตัวอย่างเช่น หากมีการคลิกที่องค์ประกอบ
เราสามารถทราบพิกัดของคลิกนั้นได้ ว่า
ปุ่ม Ctrl, Alt
หรือ Shift ถูกกดในขณะที่คลิกหรือไม่ เป็นต้น
มาดูกันว่าเราจะได้ออบเจ็กต์ Event อย่างไร
สมมติว่าเรามีปุ่ม:
<button id="elem">ข้อความ</button>
สมมติว่าเมื่อคลิกปุ่มนี้ จะมีการดำเนินการ ฟังก์ชันบางอย่าง:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
});
ภายในฟังก์ชันที่ถูกผูกไว้มีออบเจ็กต์
Event อยู่แล้ว - เราแค่ยังไม่รู้
วิธีรับมัน ได้รับมาใน
ลักษณะต่อไปนี้: เมื่อประกาศฟังก์ชันของเรา
ต้องส่งตัวแปรใดๆ เป็นพารามิเตอร์เข้าไป
(โดยทั่วไปคือ event - แต่ชื่อ
สามารถเป็นอะไรก็ได้) และเข้าไปในตัวแปรนี้ เบราว์เซอร์
จะวางออบเจ็กต์ Event ลงไปโดยอัตโนมัติ:
elem.addEventListener('click', function(event) {
console.log(event); // จะเห็นออบเจ็กต์ที่มีเหตุการณ์
});
ทำการจัดการตามที่อธิบายไว้ด้วยตนเอง และแสดงออบเจ็กต์ที่มีเหตุการณ์บนคอนโซล ศึกษา โครงสร้างของออบเจ็กต์นี้
