การสร้าง Event ใน JavaScript

ในการทำงานเขียนเว็บจำเป็นต้องรู้เรื่องของ JavaScript เพื่อให้ หน้าเว็บของเราสามารถ Interact กับผู้ใช้งานได้ดี สิ่งที่หลีกเลี่ยงไม่ได้คือ การแทรก Event เข้าไปใน DOM Element เช่นการแทรก Event onclick เข้าไปใน ปุ่ม หรือ onmouseover ให้กับรูปภาพ โดยมีหลายวิธี ดังนี้

การ Bind Event โดย การกำหนด Attribute ให้กับ Element นั้นๆ เช่น

การ Bind Event ด้วยวิธีนี้มีข้อเสียหลายอย่าง

  • ส่วนที่เป็น JavaScript เข้ามาปะปนกับ HTML
  • ไม่สามารถแก้ไขชื่อ function ได้ เนื่องจากเราไม่รู้ว่ามี DOM Element ไหนที่เรียกใช้ function นี้บ้าง
  • เราจะไม่รู้ว่า function ไหนเป็น function ธรรมดา หรือเป็น Event กันแน่

นอกจากวิธีนี้แล้วเรายังมีวิธีในการ Bind Event แบบ JavaScript อีก 2 แบบ

1. การ Get Element ที่ต้องการ โดยใช้ document.getElementById() หรือ function อื่นๆในการ เลือก Element ที่ต้องการแล้วทำการกำหนด function ให้กับ event นั้นๆ

2. อีกวิธีจะเป็นการใช้ addEventListener

เราสามารถเลือกใช้งานได้ทั้ง 2 วิธีหลัง แต่ไม่แนะนำให้ Bind แบบแรก เนื่องจากจะทำให้ Code เราทำการแก้ไขได้ยาก