JavaScript Event คืออะไร? และใช้งานอย่างไร?
Tags: javascript, event, thai
Published: 2023-01-02 08:11:24

---
title: JavaScript Event คืออะไร? และใช้งานอย่างไร?
published: true
description: 
tags: javascript, event, thai
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-17 16:10 +0000
---

ใน JavaScript เจ้า Event คือเหตุการณ์ต่างๆ ที่เกิดขึ้นขณะที่เราใช้งานเว็บเพจของเรา เช่น การคลิกลงไปบนปุ่ม, การพิมพ์ข้อความในกล่องข้อความ, การเลื่อนหน้าจอขึ้นลง, การเลือกข้อความ เป็นต้น ซึ่งพวก Event พวกนี้จะเกิดขึ้นถี่มากๆ ในเบื้องหลังขณะเราใช้งานเพจครับ

## ประเภทของ Events

เราสามารถจำแนก Events ได้ออกเป็นสองประเภทใหญ่ๆ คือ
1. **Browser Events** เป็น Events ที่เกิดขึ้นกับการใช้งานเบราเซอร์ เช่นเหตุการณ์ที่เกิดขึ้นกับ Window object เช่น loaded, error, scroll เป็นต้น
2. **HTML Events** เป็น Events ที่เกิดจากตัว HTML Elements เช่น click, mouseover, mouseout, focus, blur เป็นต้น

## Event Listener และ Handler

1. Event Listener ก็จะเป็นตัวที่รอดู รอรับฟังว่าจะเกิด Event ที่กำลังสนใจเกิดขึ้นหรือไม่ โดยเราจะต้องระบุ **ชื่อ Event** และ **Event Handler** ให้กับมัน
2. Event Handler จะเป็น Callback Functions ที่จะเขียนเพื่อตอบสนองกับเหตุการณ์ต่างๆ

เวลาที่เราจะตอบสนองกับเหตุการณ์ เราต้องเชื่อมเจ้า Event Handler เข้ากับ Event Listener ครับ เช่น

```javascript
const button = document.getElementById('save-btn');

function eventHandler() {
    alert('You clicked on the button');
}

button.addEventListener('click', eventHandler);
```

โค้ดด้านบนบรรทัดแรกเราจะต้องอ้างหา HTML Element ที่เราต้องการก่อน เช่นการใช้ **document.getElementById('save-button')** เพื่ออ้างหาปุ่มที่มีไอดีชื่อว่า **save-button**

บรรทัดต่อไปเราเขียนฟังก์ชั่นที่เราต้องการนำมาใช้เป็น Event Handler

และบรรทัดสุดท้ายเราทำการ Listen ไปยัง event click และฝัง Event Handler ที่เราเพิ่งสร้างไปด้วย ดังนั้นเมื่อปุ่มนี้ถูกคลิกโดยผู้ใช้ มันจะแสดง Alert Dialog มีข้อความว่า **You clicked on the button**

## เขียน Event Handler ได้กี่แบบ?

จริงๆ แล้วมีหลายท่าในการเขียน Event Handler ครับ แบบแรกขอยกตัวอย่างโค้ดก่อนหน้านี้มาครับ คือการเขียน Event Handler แล้วยัดลง Event Listener ตามมาตรฐานปกติ ข้อดีคือเราจะยัด Event Handler เข้าไปกี่ตัวก็ได้ เช่น

```javascript
const button = document.getElementById('save-btn');

function eventHandlerA() {
    alert('You clicked on the button');
}

function eventHandlerB() {
    alert('It really cool, isn't it?');
}

button.addEventListener('click', eventHandlerA);
button.addEventListener('click', eventHandlerB);
```

มันจะทำงานตามลำดับ เช่นอย่างโค้ดด้านบน เมื่อมีการคลิกมันจะแสดงข้อความ **You clicked on the button** แล้วตามด้วย **It really cool, isn't it?**

หากเราต้องการนำ Event Handler ตัวไหนออก ให้ส่งไปที่ removeEventListener ด้วยชื่อ Event อันเดิมเช่น

```javascript
button.removeEventListener('click', eventHandlerA);
```

ก็จะเป็นการนำ eventHandlerA ออกไป เมื่อมีการคลิกก็จะแสดงกล่องข้อความแค่อันเดียวคือ **It really cool, isn't it?**

ต่อไปเป็นการเขียนเพื่อใส่ Event Handler ให้กับ HTML Element โดยตรง ผ่าน Property **on** แล้วตามด้วยชื่อ Event ครับ เช่นต้องการใส่ Event Handler ให้กับ Event Click ก็ยัดลง **onclick** เช่น

```javascript
const button = document.getElementById('btn');

function eventHandler() {
    alert('You clicked on the button');
}

button.onclick = eventHandler;
```

หรือจะใส่ Event Handler เป็น Anonymous function ก็ได้ เช่น

```javascript
const button = document.getElementById('btn');

button.onclick = function() {
    alert('You clicked on the button');
};
```

หรือใส่เป็น Arrow function

```javascript
const button = document.getElementById('btn');

button.onclick = () => {
    alert('You clicked on the button');
};
```

ข้อดีคือง่ายสุดๆ แต่ข้อเสียหลักๆ เลยคือใส่ Event Handler ได้แค่อันเดียวต่อหนึ่ง Event

ฉะนั้นลองชั่งใจดูนะครับ