Dom events/ javascript
# Dom_ events
DOM Event or Event is the signal or notification that the browser sends out when certain events occur on the page. In other words, Event is the key to making a still HTML web page become an interactive web application with the user. 💡 The relationship between DOM and EventDOM (Document Object Model): It's like the structure or map of the entire web page, which consists of various Element (e.g. buttons, text, images) Event (Event): is what happens with those Element or Occurring in the Event browser, JavaScript can "eavesdrop" on these actions and "respond" with the code we set 🔔. Examples of common DOM Events Event can occur from both the actions of the user (User Action) and from the browser itself (Browser Action): groups of EventEvents (example) Meaning Mouse Eventsclick the user clicks the mouse on Elementmouseover, the user slides the mouse into the Elementdblclick, the double click the keyboard mouse Eventskeydown, the keyboard button presses, the keyup, the keyboard button releases, the keyboard forms, the Eventssubmits the user submits the form (Form), the value in the Input field, the Select Textaument / Document, the WindowPages. Element (e.g. picture) Load is complete scroll user scroll screen up or down 🔗. The method of using Event in JavaScript to use Event must be "tied" (Attach) function (also known as Event Handler) to the Element that needs eavesdropping. By the way, the most recommended method is to use addEventListener (): JavaScript / 1. Select the desired Element.
const myButton = document.getElementById ('myBtn');
/ / 2.Use addEventListener to "eavesdrop" Event
myButton.AddEventListener ('click', function () {
/ / 3.This function will be executed when the Event 'click' occurs.
alert ('You've clicked the button!');
});
When the user clicks the myBtn ID button, the alert () function will run immediately. In other words, DOM Event is where JavaScript comes to "live" and allows your web page to interact with the user.
นอกจากการใช้งาน DOM Events ขั้นพื้นฐานแล้ว การเข้าใจความแตกต่างระหว่าง event types เช่น keydown กับ keyup ก็สำคัญไม่แพ้กัน เช่น ปุ่มคีย์บอร์ดเมื่อกดลง keydown จะถูกเรียกใช้ทันที ส่วน keyup จะถูกเรียกใช้ตอนปล่อยปุ่ม ทำให้เราสามารถควบคุมพฤติกรรมของผู้ใช้ได้ละเอียดขึ้น ในบางกรณี การใช้ addEventListener ยังช่วยให้เราสามารถเพิ่ม event handler หลายๆ ตัวลงใน element เดียวกันโดยไม่ทับซ้อนกัน ต่างจากการใช้ inline event หรือการกำหนดแบบเก่า นอกจากนี้ การเข้าใจกลไก Event Bubbling และ Capturing ใน DOM จะช่วยให้จัดการ event ได้มีประสิทธิภาพมากขึ้น เช่น การเลือกจับ event ที่ element ต้นทางหรือทะยานขึ้นไปยัง ancestor สำหรับผู้ที่อาจเจอปัญหา 500 internal server error apache ตอนทดสอบ JavaScript บนเว็บเซิร์ฟเวอร์ แนะนำตรวจสอบองค์ประกอบฝั่งเซิร์ฟเวอร์และการตั้งค่าการรับส่งข้อมูลพร้อม รวมถึงสิทธิ์ในการเข้าถึงไฟล์ด้วย สุดท้าย อย่าลืมทดสอบการใช้งาน event ในหลากหลายเบราว์เซอร์และอุปกรณ์เพื่อให้แน่ใจว่าเว็บแอปของคุณมีความเสถียรและประสบการณ์การใช้งานที่ดีทั้งบนเดสก์ท็อปและมือถือ











































































































