JavaScript Event คืออะไร? และใช้งานอย่างไร?

ใน 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 ครับ เช่น

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 เข้าไปกี่ตัวก็ได้ เช่น

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 อันเดิมเช่น

button.removeEventListener('click', eventHandlerA);

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

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

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

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

button.onclick = eventHandler;

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

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

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

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

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

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

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

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