Event Handling

Event Handling ใน JavaScript: ตอบสนองต่อการกระทำของผู้ใช้

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการ DOM Manipulation ซึ่งเป็นพื้นฐานสำคัญในการสร้างเว็บแอปพลิเคชันที่ dynamic และ interactive แต่การเปลี่ยนแปลง DOM เพียงอย่างเดียวอาจไม่เพียงพอ เราจำเป็นต้องทำให้เว็บแอปพลิเคชันของเราตอบสนองต่อการกระทำของผู้ใช้ เช่น การคลิกปุ่ม การเลื่อนเมาส์ หรือการพิมพ์ข้อความ ซึ่งเราจะทำได้ด้วย Event Handling

Event Handling คือกระบวนการในการ "ฟัง" เหตุการณ์ (events) ที่เกิดขึ้นบนหน้าเว็บ และตอบสนองต่อเหตุการณ์เหล่านั้นด้วยการรันโค้ด JavaScript ที่เรากำหนดไว้

การใช้งาน `addEventListener()`

addEventListener() เป็น method ที่ใช้ในการผูก (bind) ฟังก์ชัน (หรือที่เรียกว่า event handler) เข้ากับ event ที่เกิดขึ้นบน element ใดๆ ใน DOM

Syntax:

element.addEventListener(event, function, useCapture);

element: คือ element ที่เราต้องการ "ฟัง" event
event: คือชื่อของ event ที่เราสนใจ (เช่น 'click', 'mouseover', 'keydown')
function: คือฟังก์ชันที่เราจะรันเมื่อ event นั้นเกิดขึ้น
useCapture: (optional) Boolean value ที่ระบุว่าจะใช้ event capturing หรือ event bubbling (จะอธิบายในภายหลัง) ค่า default คือ false ซึ่งหมายถึง event bubbling

ตัวอย่าง:

สมมติว่าเรามีปุ่มใน HTML:

<button id="myButton">คลิกฉัน!</button>

เราสามารถผูกฟังก์ชันให้ทำงานเมื่อปุ่มถูกคลิกได้ดังนี้:

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

button.addEventListener('click', function() {
  alert('ปุ่มถูกคลิก!');
});

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกปุ่มที่มี id เป็น myButton ฟังก์ชันที่เราผูกไว้จะถูกเรียกใช้งาน และจะแสดง alert box ที่มีข้อความ "ปุ่มถูกคลิก!"

กรณีใช้งานจริง:

ลองสร้างตัวอย่างที่ซับซ้อนขึ้นเล็กน้อย โดยเมื่อคลิกปุ่ม จะเปลี่ยนข้อความใน <p> tag:

<button id="changeTextButton">เปลี่ยนข้อความ</button>
<p id="myParagraph">ข้อความเริ่มต้น</p>

const changeTextButton = document.getElementById('changeTextButton');
const myParagraph = document.getElementById('myParagraph');

changeTextButton.addEventListener('click', function() {
  myParagraph.textContent = 'ข้อความถูกเปลี่ยนแล้ว!';
});

Event Types ที่พบบ่อย

JavaScript มี event types มากมายให้เราเลือกใช้ ต่อไปนี้เป็น event types ที่พบบ่อย:

Mouse Events:

click: เกิดขึ้นเมื่อ element ถูกคลิก
dblclick: เกิดขึ้นเมื่อ element ถูกดับเบิลคลิก
mouseover: เกิดขึ้นเมื่อ pointer ของเมาส์เคลื่อนที่เข้ามาใน element
mouseout: เกิดขึ้นเมื่อ pointer ของเมาส์เคลื่อนที่ออกจาก element
mousedown: เกิดขึ้นเมื่อปุ่มเมาส์ถูกกดลงบน element
mouseup: เกิดขึ้นเมื่อปุ่มเมาส์ถูกปล่อยออกจาก element

Keyboard Events:

keydown: เกิดขึ้นเมื่อกดปุ่มบนคีย์บอร์ด
keyup: เกิดขึ้นเมื่อปล่อยปุ่มบนคีย์บอร์ด
keypress: (deprecated) เกิดขึ้นเมื่อกดปุ่มที่สร้าง character (เช่น ตัวอักษร ตัวเลข)

Form Events:

submit: เกิดขึ้นเมื่อ form ถูก submit
change: เกิดขึ้นเมื่อค่าของ form element เปลี่ยนแปลง (เช่น <input>, <select>)
focus: เกิดขึ้นเมื่อ element ได้รับ focus
blur: เกิดขึ้นเมื่อ element สูญเสีย focus

Document/Window Events:

load: เกิดขึ้นเมื่อ document หรือ frame โหลดเสร็จ
resize: เกิดขึ้นเมื่อ window ถูก resize
scroll: เกิดขึ้นเมื่อ window ถูก scroll

ตัวอย่างเพิ่มเติม:

แสดงข้อความเมื่อเมาส์เคลื่อนที่เข้ามาใน <div> tag:

<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;">วางเมาส์ที่นี่</div>
<p id="mouseOverMessage"></p>

const myDiv = document.getElementById('myDiv');
const mouseOverMessage = document.getElementById('mouseOverMessage');

myDiv.addEventListener('mouseover', function() {
  mouseOverMessage.textContent = 'เมาส์อยู่บน div แล้ว!';
});

myDiv.addEventListener('mouseout', function() {
  mouseOverMessage.textContent = ''; // ล้างข้อความเมื่อเมาส์ออกจาก div
});

Event Bubbling and Capturing

เมื่อ event เกิดขึ้นบน element หนึ่งใน DOM hierarchy, event นั้นจะ "แพร่กระจาย" (propagate) ผ่าน DOM tree ซึ่งมีสองรูปแบบ:

Event Bubbling: Event จะเริ่มจาก element ที่ event เกิดขึ้น แล้ว "bubble" ขึ้นไปตาม parent elements จนถึง root element (document)
Event Capturing: Event จะเริ่มจาก root element แล้ว "capture" ลงมาตาม parent elements จนถึง element ที่ event เกิดขึ้น

โดยปกติแล้ว addEventListener() จะใช้ event bubbling เป็น default (useCapture เป็น false) ซึ่งหมายความว่า event handler จะถูกเรียกใช้งานตามลำดับจาก element ที่ event เกิดขึ้น ไปจนถึง parent elements

ตัวอย่าง:

<div id="outerDiv" style="width: 300px; height: 200px; background-color: lightgreen; padding: 20px;">
  <button id="innerButton">คลิกฉัน (ด้านใน)!</button>
</div>

const outerDiv = document.getElementById('outerDiv');
const innerButton = document.getElementById('innerButton');

innerButton.addEventListener('click', function() {
  alert('Button ถูกคลิก!');
});

outerDiv.addEventListener('click', function() {
  alert('Div ถูกคลิก!');
});

ในตัวอย่างนี้ เมื่อคลิกปุ่ม "คลิกฉัน (ด้านใน)!" ทั้ง alert box ของ button และ div จะแสดงขึ้น โดย alert box ของ button จะแสดงก่อน (event bubbling)

การใช้ Event Capturing:

หากเราต้องการใช้ event capturing แทน event bubbling เราสามารถตั้งค่า useCapture เป็น true ใน addEventListener():

const outerDiv = document.getElementById('outerDiv');
const innerButton = document.getElementById('innerButton');

innerButton.addEventListener('click', function() {
  alert('Button ถูกคลิก!');
});

outerDiv.addEventListener('click', function() {
  alert('Div ถูกคลิก!');
}, true); // useCapture = true

ตอนนี้ เมื่อคลิกปุ่ม alert box ของ div จะแสดงก่อน (event capturing)

ข้อผิดพลาดที่พบบ่อย:

การลืมใส่ชื่อ event: addEventListener() ต้องการชื่อ event ที่ถูกต้อง (เช่น 'click', 'mouseover') หากลืมใส่ หรือใส่ผิด event handler จะไม่ทำงาน
การส่ง function call แทน function reference: ควรส่ง function reference (เช่น myFunction) ไม่ใช่ function call (เช่น myFunction()) เพราะ function call จะ execute function ทันที ไม่ใช่เมื่อ event เกิดขึ้น
การใช้ this ใน event handler: ค่าของ this ใน event handler จะอ้างอิงถึง element ที่ event เกิดขึ้น ดังนั้นควรระวังการใช้งาน this ให้ถูกต้อง
การจัดการกับ event bubbling/capturing ที่ไม่ถูกต้อง: เข้าใจผิดเกี่ยวกับลำดับการทำงานของ event bubbling และ capturing อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิด

Event Handling เป็นหัวใจสำคัญของการสร้างเว็บแอปพลิเคชันที่ interactive การเข้าใจและใช้งาน addEventListener(), event types, และ event bubbling/capturing จะช่วยให้คุณสามารถสร้างเว็บแอปพลิเคชันที่ตอบสนองต่อการกระทำของผู้ใช้ได้อย่างมีประสิทธิภาพ ในบทต่อไป เราจะเรียนรู้เกี่ยวกับการจัดเก็บข้อมูลใน browser ด้วย Local Storage และ Session Storage

Event Handling ใน JavaScript: ตอบสนองต่อการกระทำของผู้ใช้

การใช้งาน addEventListener()

Event Types ที่พบบ่อย

Event Bubbling and Capturing

การใช้งาน `addEventListener()`