Dom events/ javascript

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#Dom_events

DOM Event หรือ อีเวนต์ (Event) คือ สัญญาณ หรือ การแจ้งเตือน ที่เบราว์เซอร์ส่งออกมาเมื่อมี เหตุการณ์บางอย่างเกิดขึ้น บนหน้าเว็บกล่าวโดยง่ายคือ Event เป็นหัวใจสำคัญที่ทำให้เว็บเพจที่เป็นแค่ HTML นิ่ง ๆ กลายเป็น เว็บแอปพลิเคชันที่มีการโต้ตอบ (Interactive) กับผู้ใช้งานได้ครับ💡 ความสัมพันธ์ระหว่าง DOM กับ EventDOM (Document Object Model): เปรียบเสมือน โครงสร้าง หรือ แผนที่ ของหน้าเว็บทั้งหมด ซึ่งประกอบด้วย Element ต่าง ๆ (เช่น ปุ่ม, ข้อความ, รูปภาพ)Event (อีเวนต์): คือ สิ่งที่เกิดขึ้น กับ Element เหล่านั้น หรือเกิดขึ้นในเบราว์เซอร์Event ทำให้ JavaScript สามารถ "ดักฟัง" (Listen) การกระทำเหล่านี้ และ "ตอบสนอง" (Respond) ด้วยการรันโค้ดที่เรากำหนดไว้🔔 ตัวอย่างของ DOM Events ที่พบบ่อยEvent สามารถเกิดขึ้นได้จากทั้งการกระทำของผู้ใช้ (User Action) และจากตัวเบราว์เซอร์เอง (Browser Action):กลุ่มของ EventEvent (ตัวอย่าง)ความหมายMouse Eventsclickผู้ใช้คลิกเมาส์บน Elementmouseoverผู้ใช้เลื่อนเมาส์เข้าไปอยู่เหนือ Elementdblclickผู้ใช้ดับเบิลคลิกเมาส์Keyboard Eventskeydownผู้ใช้กดปุ่มคีย์บอร์ดลงไปkeyupผู้ใช้ปล่อยปุ่มคีย์บอร์ดForm Eventssubmitผู้ใช้กดส่งฟอร์ม (Form)changeค่าในช่อง Input, Select, หรือ Textarea เปลี่ยนแปลงDocument/Windowloadหน้าเว็บหรือ Element (เช่น รูปภาพ) โหลดเสร็จสมบูรณ์scrollผู้ใช้เลื่อนหน้าจอขึ้นหรือลง🔗 วิธีการใช้งาน Event ใน JavaScriptการใช้งาน Event จะต้องมีการ "ผูก" (Attach) ฟังก์ชัน (หรือเรียกว่า Event Handler) เข้ากับ Element ที่ต้องการดักฟัง โดยวิธีที่แนะนำที่สุดคือการใช้ addEventListener():JavaScript// 1. เลือก Element ที่ต้องการ

const myButton = document.getElementById('myBtn');

// 2. ใช้ addEventListener เพื่อ "ดักฟัง" Event

myButton.addEventListener('click', function() {

// 3. ฟังก์ชันนี้จะถูกรันเมื่อ Event 'click' เกิดขึ้น

alert('คุณคลิกปุ่มแล้ว!');

});

เมื่อผู้ใช้คลิกปุ่มที่มี ID เป็น myBtn ฟังก์ชัน alert() ก็จะทำงานทันทีพูดง่ายๆ คือ DOM Event คือจุดที่ JavaScript เข้ามา "มีชีวิต" และทำให้เว็บเพจของคุณมีปฏิสัมพันธ์กับผู้ใช้ได้จริงนั่นเองครับ