Events

ถ้าคุณเคยสร้าง prototype ใน Figma มาก่อน คุณก็เข้าใจแนวคิดหลักของ JavaScript events แล้ว เมื่อคุณตั้งค่า prototype interaction ไว้ว่า “เมื่อผู้ใช้แตะ hotspot นี้ ให้ไปที่ frame X” นั่นคือการอธิบาย trigger และ response JavaScript ทำงานแบบเดียวกันทุกประการ: คุณรอฟังสิ่งที่จะเกิดขึ้น แล้วเมื่อเกิดขึ้นจริง คุณก็รันโค้ด

Event คืออะไร?

Event คือ ช่วงเวลาที่บางอย่างเกิดขึ้นใน browser ผู้ใช้คลิกปุ่ม — นั่นคือ event การกดแป้นพิมพ์ — นั่นก็คือ event การ hover เมาส์เหนือรูปภาพ — ก็เป็น event เช่นกัน

browser กำลังจับตาดูช่วงเวลาเหล่านี้ตลอดเวลา หน้าที่ของคุณในฐานะนักพัฒนาคือบอก browser ว่า “เมื่อ event นี้ เกิดขึ้นบน element นั้น ให้รัน โค้ดนี้”

addEventListener

method ที่เชื่อมทุกอย่างเข้าด้วยกันคือ addEventListener ซึ่งรับสองสิ่ง:

ชื่อ ของ event ที่ต้องการฟัง (เช่น 'click')
ฟังก์ชัน ที่จะรันเมื่อ event นั้นเกิดขึ้น — เรียกว่า handler หรือ callback

var btn = document.querySelector('#myButton');

btn.addEventListener('click', function() {
  // โค้ดนี้จะรันทุกครั้งที่ปุ่มถูกคลิก
});

ลองนึกถึง addEventListener เหมือนกับแผง prototype ใน Figma คุณเลือก element เลือก trigger (“On click”) แล้วระบุว่าจะเกิดอะไรขึ้นต่อไป ในที่นี้ trigger คือ 'click' และ “สิ่งที่จะเกิดขึ้นต่อไป” คือฟังก์ชันที่คุณส่งเข้าไป

ฟังก์ชันที่อยู่ข้างใน addEventListener เรียกว่า callback เพราะ browser จะ “โทรกลับ” มาเรียกฟังก์ชันนี้ในเวลาที่เหมาะสม — คุณไม่ได้เรียกเอง

ปุ่มที่นับจำนวนคลิก

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

<button id="countBtn">Click me!</button>
<p id="counter">You have clicked 0 times.</p>

มาดูทีละขั้นตอนว่าเกิดอะไรขึ้น:

var count = 0 — ตัวแปรที่เริ่มต้นที่ศูนย์และเพิ่มขึ้นทุกครั้งที่คลิก
document.querySelector('#countBtn') — ดึงปุ่มออกมาจากหน้าเว็บ
document.querySelector('#counter') — ดึงย่อหน้าที่แสดงยอดรวมออกมา
addEventListener('click', function() { ... }) — ทุกครั้งที่ปุ่มถูกคลิก ฟังก์ชันข้างในจะทำงาน
ภายในฟังก์ชัน count จะเพิ่มขึ้นทีละหนึ่ง จากนั้น counter.textContent จะถูกอัปเดตเพื่อสะท้อนยอดรวมใหม่โดยใช้การต่อ string (+)

สังเกตว่า textContent ใช้ตัวดำเนินการ + เพื่อนำตัวเลขมาต่อกับข้อความรอบข้าง ซึ่งทำให้โค้ดอ่านง่ายและหลีกเลี่ยง syntax พิเศษภายใน string

เปรียบเทียบกับ Figma

Figma	JavaScript
เลือก hotspot	`document.querySelector('#myElement')`
เลือก trigger: On Click	`addEventListener('click', ...)`
เลือก action: navigate / change variant	ส่วนของฟังก์ชัน — โค้ดที่คุณกำหนดเอง

ใน Figma ทุก prototype interaction คือ: trigger → action ใน JavaScript ทุก event listener คือ: event → callback แนวคิดเหมือนกันทุกประการ มีแค่ syntax เท่านั้นที่ใหม่

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ออกแบบ interaction โดยลืมนึกถึง “จังหวะ” ที่เกิดขึ้น (click, hover, scroll, load)
ไม่ระบุใน design ว่า animation ควร trigger ตอนไหน (hover หรือ click)

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “hover แล้วปุ่มเปลี่ยนสี” แต่ developer ต้องเขียน code ที่ “ฟัง” event นั้นโดยเฉพาะ (mouseenter, click, scroll) แล้วค่อยสั่งให้อะไรเกิดขึ้น

💡 ตัวอย่างจากของจริง

Interaction ของ Linear (เช่น command palette ที่เปิดด้วย Cmd+K) ต้องมีการ “ฟัง” keyboard event เฉพาะเจาะจงที่ designer ต้องระบุให้ developer รู้ล่วงหน้า