events listen /javascript
In JavaScript, the Event Listener is the function that awaits the event (Event) specified to occur with any Element element on the web page and then responds to the event by calling the corresponding function.
👂 Event Listener
Event: This is what happens while we use a web page, such as:
Click the mouse on the button (click)
Typing text in the field (keyup, keydown)
Scrolling screen (scroll)
The loading is complete of the web page (load).
Putting the mouse over the element (mouseover)
Listener: This is the function you defined using the main method, the addEventListener (), which binds "the event to the desired element (such as a button, text box, or entire web page) and specifies the function to be active when the event occurs.
Handler / Callback Function: This function is an Execute function that will be triggered immediately when the Event Listener detects that the waiting event has occurred. Within this function, we will write the required code, such as change the message, display the alert message, or send the data to the server.
Event Listener makes web pages interactive with users.
The basic syntax of adding an Event Listener is:
JavaScript
element.addEventListener ('event name', function provided to run);
/ / Example:
const button = document.getElementById ('myButton');
button.AddEventListener ('click', function () {
alert ('The button has been clicked!');
});
How does addEventListener work? Use when? - This javascript will help explain how to use the addEventListener method to handle events in JavaScripts.
Event Listener ใน JavaScript คือเครื่องมือสำคัญที่ช่วยให้เว็บไซต์ตอบสนองต่อการกระทำของผู้ใช้ได้แบบไดนามิก โดยทำหน้าที่เป็นตัว "ผู้เฝ้าดู" (Observer) รอการเกิดเหตุการณ์กับองค์ประกอบ HTML ที่กำหนดไว้ เช่น ปุ่ม กรอกข้อความ หรือแม้แต่เบราว์เซอร์เอง เมื่อเกิดเหตุการณ์ขึ้น Event Listener จะเรียกใช้งานฟังก์ชันที่เราเขียนไว้เพื่อจัดการกับเหตุการณ์นั้นทันที องค์ประกอบหลักของ Event Listener มี 3 ส่วน คือ 1. องค์ประกอบเป้าหมาย (Target Element) ซึ่งคือวัตถุใน DOM ที่ต้องการจับเหตุการณ์ เช่น ปุ่ม (button), ช่องกรอกข้อความ (input) หรือ window 2. ชนิดของเหตุการณ์ (Event Type) ระบุประเภทของเหตุการณ์ เช่น click (คลิกเมาส์), keyup/keydown (กดปุ่มคีย์บอร์ด), scroll (เลื่อนหน้าเว็บ), load (โหลดหน้าเว็บเสร็จ) หรือ mouseover (นำเมาส์ไปวางบนองค์ประกอบ) 3. ฟังก์ชันจัดการเหตุการณ์ (Event Handler หรือ Callback Function) เป็นฟังก์ชันที่เขียนขึ้นเพื่อรับผิดชอบการทำงานเมื่อเกิดเหตุการณ์ เช่น แสดงข้อความแจ้งเตือน เปลี่ยนแปลงเนื้อหาในหน้า ส่งข้อมูลไปยังเซิร์ฟเวอร์ หรือจัดการค่าข้อมูลที่ผู้ใช้ป้อน วิธีการผูก Event Listener กับองค์ประกอบใน JavaScript ใช้เมธอด addEventListener รูปแบบทั่วไปคือ ```javascript element.addEventListener('ชื่อเหตุการณ์', ฟังก์ชันที่จะเรียกใช้); ``` เช่น ตัวอย่างการผูก listener กับปุ่มที่มี id เป็น "myButton" เพื่อแสดง alert เมื่อผู้ใช้คลิกปุ่ม ```javascript const button = document.getElementById('myButton'); button.addEventListener('click', function() { alert('ปุ่มถูกคลิกแล้ว!'); }); ``` นอกจากนี้ การใช้งาน Event Listener ยังช่วยให้เว็บไซต์รองรับการโต้ตอบที่ซับซ้อนมากขึ้น เช่น การจับเหตุการณ์หลายตัวพร้อมกัน การบริหารจัดการลำดับการเกิดเหตุการณ์ (Event bubbling และ capturing) รวมทั้งการลบ Event Listener เพื่อเพิ่มประสิทธิภาพและลดการใช้งานทรัพยากร การเข้าใจและนำ Event Listener มาใช้ได้อย่างถูกต้อง จะช่วยเพิ่มประสบการณ์ที่ดีให้กับผู้ใช้งานเว็บ ด้วยการตอบสนองทันทีและถูกต้องตามการกระทำต่างๆ บนหน้าเว็บ ทำให้เว็บเพจดูทันสมัยและน่าใช้งานมากขึ้น
