JavaScript Events: สามวิธีในการสร้าง Event

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

JavaScript Event คืออะไร?

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

JavaScript events มีการใช้งานที่หลากหลาย ซึ่งรวมถึง:

• ตรวจสอบว่าฟอร์มได้รับการกรอกข้อมูลครบถ้วนหรือไม่
• นำทางผู้ใช้ไปยังหน้าอื่นเมื่อพวกเขากรอกฟอร์มเสร็จแล้ว
• ทำให้เมนูแบบดรอปดาวน์มีการโต้ตอบ
• อนุญาตให้ผู้ใช้ซูมเข้า-ออกของรูปภาพได้

เพื่อทำงานกับ events ใน JavaScript คุณต้องรู้จักสองแนวคิดหลัก ได้แก่ event handlers และ event listeners

Event handler คือฟังก์ชันที่จะถูกเรียกใช้เมื่อ event ถูกกระตุ้นบนหน้าเว็บ Event listeners ทำหน้าที่เชื่อมต่อฟังก์ชัน event กับองค์ประกอบ HTML เพื่อที่เมื่อฟังก์ชันนั้นทำงาน องค์ประกอบบนเว็บก็จะเปลี่ยนแปลงตามไปด้วย

Event handlers สามารถกำหนดได้สามวิธี ได้แก่ การใช้ inline event handler, event property หรือ event listener

Inline Event Handlers

วิธีที่ง่ายที่สุดในการเริ่มต้นใช้งาน events ใน JavaScript คือการใช้ inline event handler ซึ่งหมายความว่าคุณจะกำหนด event ในไฟล์ HTML ของคุณ

สำหรับตัวอย่างนี้ สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับร้านเบเกอรี่ชื่อ "JJ Smith's Bakery" เราต้องการให้ผู้ใช้เห็นข้อความ "Response received." เมื่อพวกเขาส่งฟอร์ม

พิจารณาโค้ดต่อไปนี้:

<!DOCTYPE html> <html> <head> <title>JJ Smith's Bakery</title> </head> <script src="main.js"></script> <body> <p id="submitted"></p> <button onclick="submitForm()">Submit form</button> </body> </html>

โค้ดนี้จะแสดงหน้าเว็บที่มีลักษณะดังนี้:

จนถึงตอนนี้ยังไม่มีอะไรเกิดขึ้น หน้าเว็บของเรามีปุ่มที่ควรทำงานเมื่อเราคลิก แต่เมื่อเราคลิกปุ่ม ไม่มีอะไรเกิดขึ้นเลย เนื่องจากเรายังไม่ได้เขียน event handler

ในไฟล์ main.js ให้วางโค้ดต่อไปนี้:

const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Form submitted." }

โค้ดนี้จะค้นหาองค์ประกอบที่มี ID "submitted" และเปลี่ยนเนื้อหาให้เป็น "Form submitted." โค้ดนี้จะทำงานเฉพาะเมื่อฟังก์ชัน submitForm() ถูกเรียก ซึ่งจะเกิดขึ้นเมื่อผู้ใช้คลิกที่ปุ่มของเรา

เมื่อเราคลิกปุ่ม จะเกิดขึ้นดังนี้:

ตามที่เห็น ข้อความแจ้งเตือนปรากฏขึ้น เราได้ใช้ inline event handler เพื่อทำให้หน้าเว็บมีการโต้ตอบ แต่ inline event handlers ไม่ใช่วิธีเดียวในการใช้ events ใน JavaScript มาดูวิธีใช้ event handler property กัน

Events กับ Handler Properties

ใน inline handler คุณต้องระบุว่าต้องการให้ฟังก์ชันไหนทำงานในไฟล์ HTML ในโค้ด HTML จากตัวอย่างก่อนหน้า บรรทัดนี้คือที่ที่เรากำหนดฟังก์ชันที่ต้องการเรียกเมื่อปุ่มถูกกด:

<button onclick="submitForm()">Submit form</button>

ด้วย handler properties เราสามารถลบ event "onclick" ออกจากโค้ดได้ ทำให้เราสามารถย้าย JavaScript ทั้งหมดที่ทำให้หน้าเว็บมีการโต้ตอบ ไปไว้ในไฟล์ของมันเอง ในตัวอย่างนี้ เราจะกำหนด ID "button" ให้กับปุ่ม เพื่อให้สามารถระบุปุ่มในโค้ด JavaScript ได้ ให้ลบ onclick event และกำหนด ID ให้ปุ่ม:

<button id="button">Submit form</button>

เพื่อให้ event ทำงานเมื่อปุ่มถูกกด เราจะเขียน event ด้วย handler property ภายในไฟล์ "main.js" โค้ดที่เราจะใช้คือ:

const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Form submitted." } const button = document.getElementById("button") button.onclick = submitForm;

เมื่อคุณรันโค้ดนี้และคลิกที่ปุ่ม จะได้ผลลัพธ์ดังนี้:

ปุ่มของเราทำงานเหมือนเดิม แต่โค้ดเขียนในรูปแบบที่แตกต่างกัน แทนที่จะเขียน event handlers แบบ inline เราได้ย้ายไปไว้ใน main.js ซึ่งช่วยให้โค้ดบำรุงรักษาได้ง่ายขึ้น เพราะไม่ต้องอ่านโค้ด HTML ทั้งหมดเพื่อหาว่า inline events ถูกกระตุ้นที่ไหน

Event Listener

Event listeners สามารถใช้ในการประกาศ event ใน JavaScript Listeners จะคอยเฝ้ารอว่าสถานะขององค์ประกอบเปลี่ยนแปลงหรือไม่ และหากองค์ประกอบนั้นเปลี่ยนแปลง โค้ดใน listener ก็จะถูก執行

ตัวอย่างเช่น เมื่อคุณคลิกที่ปุ่มที่ผูกกับ event listener listener จะ "ได้ยิน" ว่า mouse event ถูกกระตุ้น แล้วจะ執行โค้ดที่คุณเชื่อมโยงกับ event listener นั้น

โค้ด HTML สำหรับตัวอย่างนี้เหมือนกับข้างต้น แต่เราจะทำการเปลี่ยนแปลงเล็กน้อยในไฟล์ "main.js":

const submitForm = () => { const text = document.getElementById("submitted"); text.textContent = "Form submitted." } const button = document.getElementById("button") button.addEventListener("click", submitForm);

ในโค้ดนี้ เราใช้ addEventListener เพื่อสร้าง event listener แทนการผูกฟังก์ชัน JavaScript submitForm() กับ onclick event เช่นที่เราทำในสองตัวอย่างก่อนหน้า

เราระบุ "click" เพื่อบอกโค้ดให้ฟังเมื่อปุ่มถูกคลิกด้วยตัวชี้เมาส์ มี event types อื่นๆ อีกมาก เช่น keyboard events แต่ในบทช่วยสอนนี้เราจะเน้นที่ mouse click event

ลองรันโค้ดอีกครั้งและคลิกปุ่มของเรา

ผลลัพธ์เหมือนกับที่เราเห็นในสองตัวอย่างก่อนหน้า แต่คราวนี้เราใช้ HTML event listener Event listeners เป็นวิธีล่าสุดในการประกาศ events ใน JavaScript และน่าจะเป็นวิธีที่ใช้กันมากที่สุด

สรุป

JavaScript events ช่วยให้คุณทำให้หน้าเว็บของคุณมีการโต้ตอบได้ Event อาจถูกกระตุ้นเมื่อคุณกดปุ่ม ส่งฟอร์ม หรือ hover บนข้อความบางส่วน มีสามวิธีในการประกาศ event ใน JavaScript ได้แก่ inline, ใช้ property หรือใช้ listener

ตอนนี้คุณพร้อมที่จะเริ่มสร้าง events ใน JavaScript อย่างมืออาชีพแล้ว!