การตอบสนองต่อเหตุการณ์ (Event Handling) ต่างๆ บนเว็บไซต์

ยินดีต้อนรับกลับมาสู่บทเรียนสร้างปฏิสัมพันธ์กับผู้ใช้บนเว็บไซต์! ในบทที่แล้ว เราได้เรียนรู้วิธีรับข้อมูลจากผู้ใช้ผ่านฟอร์ม HTML และตรวจสอบความถูกต้องของข้อมูลด้วย JavaScript ซึ่งเป็นก้าวสำคัญในการทำให้เว็บไซต์ของเราสามารถสื่อสารกับผู้ใช้ได้ ในบทนี้ เราจะไปอีกขั้นด้วยการเรียนรู้วิธี "ฟัง" การกระทำของผู้ใช้บนเว็บไซต์ และตอบสนองต่อการกระทำเหล่านั้น หรือที่เรียกว่า Event Handling นั่นเอง

เหตุการณ์ (Events) คืออะไร?

ลองนึกภาพว่าเว็บไซต์ของคุณเป็นเหมือนเวทีการแสดง และผู้ใช้คือผู้ชมที่กำลังมีปฏิสัมพันธ์กับเวทีนั้น การกระทำต่างๆ ที่ผู้ใช้ทำ เช่น การคลิกเมาส์ การเลื่อนหน้าจอ การพิมพ์ข้อความ หรือแม้แต่การวางเมาส์เหนือปุ่ม ล้วนเป็น เหตุการณ์ (Events) ที่เกิดขึ้นบนเวทีของเรา

Event Handling คือกระบวนการที่ทำให้เว็บไซต์ของเรา "รับฟัง" เหตุการณ์เหล่านี้ และทำบางอย่างเพื่อตอบสนองต่อเหตุการณ์นั้นๆ ยกตัวอย่างเช่น:

เมื่อผู้ใช้คลิกปุ่ม "ส่งข้อมูล" เราจะตรวจสอบข้อมูลในฟอร์มและส่งไปยังเซิร์ฟเวอร์
เมื่อผู้ใช้เลื่อนเมาส์เหนือรูปภาพ เราจะแสดงคำอธิบายเพิ่มเติม
เมื่อผู้ใช้กดปุ่ม "Enter" ในช่องค้นหา เราจะทำการค้นหาข้อมูล

Event Handling ช่วยให้เว็บไซต์ของเรามีความยืดหยุ่นและสามารถตอบสนองต่อความต้องการของผู้ใช้ได้อย่างเหมาะสม

ประเภทของเหตุการณ์ที่พบบ่อย

มีเหตุการณ์มากมายที่สามารถเกิดขึ้นบนเว็บไซต์ได้ แต่มีบางเหตุการณ์ที่พบบ่อยและสำคัญกว่าเหตุการณ์อื่นๆ เราจะมาดูกัน:

click: เกิดขึ้นเมื่อผู้ใช้คลิกเมาส์บนองค์ประกอบ HTML
mouseover: เกิดขึ้นเมื่อเมาส์เลื่อนเข้ามาเหนือองค์ประกอบ HTML
mouseout: เกิดขึ้นเมื่อเมาส์เลื่อนออกจากองค์ประกอบ HTML
keydown: เกิดขึ้นเมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์
keyup: เกิดขึ้นเมื่อผู้ใช้ปล่อยปุ่มบนแป้นพิมพ์
submit: เกิดขึ้นเมื่อผู้ใช้ส่งฟอร์ม
load: เกิดขึ้นเมื่อหน้าเว็บหรือองค์ประกอบ HTML โหลดเสร็จสมบูรณ์
scroll: เกิดขึ้นเมื่อผู้ใช้เลื่อนหน้าจอ
change: เกิดขึ้นเมื่อค่าขององค์ประกอบฟอร์ม (เช่น ช่องข้อความ, ช่องเลือก) เปลี่ยนแปลง

นี่เป็นเพียงส่วนหนึ่งของเหตุการณ์ทั้งหมดที่มีอยู่ แต่เป็นเหตุการณ์ที่สำคัญและมักถูกนำมาใช้ในการสร้างปฏิสัมพันธ์กับผู้ใช้

การใช้ Event Listeners

ในการ "รับฟัง" เหตุการณ์ เราต้องใช้สิ่งที่เรียกว่า Event Listeners Event Listeners คือฟังก์ชัน JavaScript ที่รอคอยการเกิดเหตุการณ์ที่ระบุ และเมื่อเหตุการณ์นั้นเกิดขึ้น ฟังก์ชันก็จะทำงาน

มีหลายวิธีในการเพิ่ม Event Listeners แต่เราจะเน้นที่วิธีที่แนะนำและเป็นมาตรฐาน:

// เลือกองค์ประกอบ HTML ที่เราต้องการ "ฟัง" เหตุการณ์
const button = document.querySelector('#myButton');

// เพิ่ม Event Listener ให้กับองค์ประกอบนั้น
button.addEventListener('click', function() {
  // โค้ดที่จะทำงานเมื่อปุ่มถูกคลิก
  alert('ปุ่มถูกคลิก!');
});

คำอธิบาย:

document.querySelector('#myButton'): เลือกองค์ประกอบ HTML ที่มี ID เป็น "myButton" (สมมติว่าเป็นปุ่ม)
button.addEventListener('click', function() { ... }): เพิ่ม Event Listener ให้กับปุ่ม โดยระบุว่าเราต้องการ "ฟัง" เหตุการณ์ click และเมื่อเหตุการณ์ click เกิดขึ้น ฟังก์ชันที่อยู่ภายใน {} จะทำงาน
alert('ปุ่มถูกคลิก!'): เป็นโค้ดที่จะทำงานเมื่อปุ่มถูกคลิก ในที่นี้เราจะแสดงข้อความแจ้งเตือน

ตัวอย่าง HTML:

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

ลองคัดลอกโค้ด HTML และ JavaScript ไปใส่ในไฟล์ HTML ของคุณ แล้วเปิดในเบราว์เซอร์ เมื่อคุณคลิกปุ่ม คุณจะเห็นข้อความแจ้งเตือนปรากฏขึ้น นี่คือตัวอย่างแรกของการใช้ Event Handling!

กรณีใช้งานจริง: การเปลี่ยนสีพื้นหลังเมื่อคลิกปุ่ม

const colorButton = document.querySelector('#colorButton');
const body = document.querySelector('body');

colorButton.addEventListener('click', function() {
  // สร้างสีแบบสุ่ม
  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

  // เปลี่ยนสีพื้นหลังของ body
  body.style.backgroundColor = randomColor;
});

ตัวอย่าง HTML:

<button id="colorButton">เปลี่ยนสีพื้นหลัง</button>

โค้ดนี้จะสร้างปุ่มที่เมื่อคลิกแล้ว จะเปลี่ยนสีพื้นหลังของหน้าเว็บเป็นสีแบบสุ่ม

การป้องกันการเกิดเหตุการณ์ซ้ำ (Event Propagation)

บางครั้ง องค์ประกอบ HTML อาจซ้อนกันอยู่ และเมื่อเกิดเหตุการณ์บนองค์ประกอบหนึ่ง เหตุการณ์นั้นอาจ "แพร่กระจาย" ไปยังองค์ประกอบที่อยู่ด้านนอกด้วย ปรากฏการณ์นี้เรียกว่า Event Propagation

มีสองประเภทหลักของ Event Propagation:

Bubbling: เหตุการณ์จะแพร่กระจายจากองค์ประกอบที่เกิดเหตุการณ์ ไปยังองค์ประกอบที่อยู่ด้านนอกทั้งหมด (จากลูกไปหาแม่)
Capturing: เหตุการณ์จะแพร่กระจายจากองค์ประกอบที่อยู่ด้านนอกสุด (document) ลงไปยังองค์ประกอบที่เกิดเหตุการณ์ (จากแม่ไปหาลูก)

โดยปกติ เบราว์เซอร์ส่วนใหญ่จะใช้ Bubbling เป็นค่าเริ่มต้น

ตัวอย่าง:

<div id="outer">
  <button id="inner">คลิกฉัน!</button>
</div>

const outerDiv = document.querySelector('#outer');
const innerButton = document.querySelector('#inner');

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

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

เมื่อคุณคลิกปุ่ม "คลิกฉัน!" คุณจะเห็นข้อความแจ้งเตือน "Button ถูกคลิก!" ก่อน แล้วตามด้วย "Div ถูกคลิก!" นี่เป็นเพราะเหตุการณ์ click เกิดขึ้นบนปุ่มก่อน แล้วแพร่กระจายไปยัง div ที่อยู่ด้านนอก

การป้องกัน Event Propagation:

บางครั้งเราอาจต้องการป้องกันไม่ให้เหตุการณ์แพร่กระจาย เพื่อควบคุมพฤติกรรมของเว็บไซต์ได้อย่างแม่นยำ เราสามารถใช้เมธอด stopPropagation() เพื่อหยุดการแพร่กระจายของเหตุการณ์ได้

innerButton.addEventListener('click', function(event) {
  alert('Button ถูกคลิก!');
  event.stopPropagation(); // หยุดการแพร่กระจายของเหตุการณ์
});

เมื่อเพิ่ม event.stopPropagation() เข้าไป เมื่อคุณคลิกปุ่ม "คลิกฉัน!" คุณจะเห็นเพียงข้อความแจ้งเตือน "Button ถูกคลิก!" เท่านั้น เหตุการณ์จะไม่แพร่กระจายไปยัง div ที่อยู่ด้านนอก

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

ลืมเพิ่ม Event Listener: ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม Event Listener ให้กับองค์ประกอบ HTML ที่ถูกต้อง
พิมพ์ชื่อเหตุการณ์ผิด: ชื่อเหตุการณ์ต้องถูกต้อง (เช่น click ไม่ใช่ clik)
ลืม event.preventDefault(): หากคุณต้องการป้องกันพฤติกรรมเริ่มต้นของเหตุการณ์ (เช่น การส่งฟอร์ม) อย่าลืมใช้ event.preventDefault()
การอ้างอิง this ภายใน Event Listener: ค่าของ this ภายใน Event Listener อาจแตกต่างกันไป ขึ้นอยู่กับวิธีการเพิ่ม Event Listener

Event Handling เป็นพื้นฐานสำคัญในการสร้างปฏิสัมพันธ์กับผู้ใช้บนเว็บไซต์ ลองฝึกฝนการใช้ Event Listeners และเรียนรู้เกี่ยวกับเหตุการณ์ต่างๆ ที่มีอยู่ เพื่อให้คุณสามารถสร้างเว็บไซต์ที่ตอบสนองต่อความต้องการของผู้ใช้ได้อย่างมีประสิทธิภาพ ในบทถัดไป เราจะเรียนรู้วิธีเปลี่ยนแปลงเนื้อหาและสไตล์ของเว็บไซต์ด้วย JavaScript ซึ่งจะช่วยให้เว็บไซต์ของคุณมีความน่าสนใจและใช้งานง่ายยิ่งขึ้น!