About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

Event Handler ที่นักพัฒนาเว็บไซต์ควรรู้ (JavaScript) [Article ID : 170]

เรื่อง : Event Handler ที่นักพัฒนาเว็บไซต์ควรรู้

Event Handler (อีเวนท์ แฮน’เดลอะ) คือ การจัดการ/ตรวจสอบเหตุการณ์ต่อพฤติกรรมของผู้ที่เข้ามาใช้งาน Web Page โดยเราสามารถใช้เหตุการณ์ต่าง ๆ ของผู้เยี่ยมชมเว็บ นำมาใช้ในการกำหนดรูปแบบทางเทคนิดต่าง ๆ บนเว็บเพจเราได้ เช่น เมื่อผู้เยี่ยมชมเว็บนำ Mouse ไปวางไว้ที่ปุ่มกดที่อยู่บนเว็บเพจ ปุ่มกดจะมีการโต้ตอบลักษณะต่าง ๆ ขึ้นมา เป็นต้น (ตัวอย่างเช่น Button ด้านล่างนี้)
...ซึ่งเรื่องของ Event Handler นี้สำคัญมากสำหรับนักพัฒนาเว็บไซต์ที่ควรต้องรู้ และใช้งานเป็น ครั้งนี้จึงขอแนะนำ Event Handler ที่เราควรรู้จักไว้เพื่อเป็นแนวทางในการกำหนดใช้งาน Event Handler ต่อไป..

ตัวอย่างของ Event Handler

Events นั้นมีมากมายให้นักพัฒนาเว็บไซต์เลือกใช้งาน ด้านล่างนี้คือรายชื่อ Events ที่เราจะพบเห็นหรือใช้งานกันอยู่บ่อยครั้ง ทั้งนี้การเลือกใช้ Events เราต้องพิจารณาที่ Object ที่เราจะกำหนด Event และเหตุการณ์ที่เราต้องการตรวจสอบด้วยครับ เช่น Button หรือปุ่มกด อีเวนท์ที่เหมาะสมจะนำมาใช้ คือ onClick เป็นต้น ทั้งนี้การใช้ Events ให้พิจารณา เหตุและผลในการใช้งานกันครับ

Event Handler
Event Name	ความหมาย
onAbort	เหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้งานเว็บเพจมีการขัดจังหวะการทำงานของเว็บเพจ
onChange	เหตุการณ์ที่เกิดขึ้นเมื่อมีการเปลี่ยนแปลงข้อมูลภายใน input
onClick	เหตุการณ์ที่เกิดขึ้นเมื่อมีผู้ใช้งานเว็บเพจทำการ Click ที่ Object นั้น
onDblClick	เหตุการณ์ที่เกิดขึ้นเมื่อมีผู้ใช้งานเว็บเพจ ทำการ Double Click ที่ Object นั้น
onDragDrop	เหตุการณ์ที่เกิดขึ้นเมื่อมีการลากและปล่อย Mouse
onError	เหตุการณ์ที่เกิดขึ้นเมื่อเว็บเพจมีการ Error
onFocus	เหตุการณ์ที่เกิดขึ้นเมื่อมีการโฟกัสไปยัง Object นั้น
onKeyDown	เหตุการณ์ที่เกิดขึ้นเมื่อมีการกดปุ่มบน Keyboard
onKeyPress	เหตุการณ์ที่เกิดขึ้นเมื่อมีการกดปุ่มใด ๆ บน Keyboard
onKeyUp	เหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้ปล่อยมืออกจากปุ่มกดบน Keyboard
onMouseDown	เหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้งานกด Mouse ลง
onMouseOut	เหตุการณ์ที่เกิดขึ้นเมื่อนำ Mouse ออกจาก Object หรือบริเวณที่กำหนด
onMouseOver	เหตุการณ์ที่เกิดขึ้นเมื่อนำ Mouse มาวางไว้เหนือ Object หรือบริเวณที่กำหนด
onMouseUp	เหตุการณ์ที่เกิดขึ้นเมื่อปล่อยมืออกจากปุ่มกดของ Mouse
onMove	เหตุการณ์ที่เกิดขึ้นเมื่อมีการย้ายหน้าต่างของ Browser
onReset	เหตุการณ์ที่เกิดขึ้นเมื่อมีการกดปุ่ม Reset ของ Form
onResize	เหตุการณ์ที่เกิดขึ้นเมื่อมีการเปลี่ยนแปลงขนาดของ Browser
onSelect	เหตุการณ์ที่เกิดขึ้นเมื่อมีการเลือกข้อมูลของ Input
onSubmit	เหตุการณ์ที่เกิดขึ้นเมื่อมีการกดที่ปุ่ม Submit ของ Form หรือ Form เกิดการ Submit

ตัวอย่างการกำหนด Event Handler โดยใช้โปรแกรม Dreamweaver

เราสามารถกำหนด Events ตามตารางข้างต้นได้จากหน้าต่าง Behaviors ของโปรแกรม Dreamweaver แต่ก่อนที่จะทำการกำหนด Event ได้ เราต้องทำการสร้างสิ่งที่ต้องการตรวจจับ Event เมื่อเหตุการณ์นั้นเกิดขึ้นมาเสียก่อน เช่น เราอาจจะสร้างเป็น Button ขึ้นมา จากนั้นเราก็มากำหนด Event Handler กับหน้าต่าง Behaviors ต่อไป เป็นต้น ซึ่งมีขั้นตอนต่าง ๆ ดังนี้

1. ทำการสร้าง Button และเลือกไปที่ Button ที่สร้างนั้น ดังรูป

2. เปิดหน้าต่าง Behaviors ขึ้นมา โดยไปที่ Main Menu -> Window -> Behaviors ดังรูป

3. ที่หน้าต่าง Behaviors นี้ให้เรา Click ไปที่ Show all events โปรแกรมจะแสดงรายการ Events ขึ้นมา ดังรูป

* สังเกตตรง Tag ครับ ขณะเราใช้ Behaviors ชือ Tag ต้องเป็นชื่อของ Object ที่เราเลือกไว้กับเว็บเพจ ในตัวอย่างคือ <input>

4. เลือกไปที่ Event ที่ต้องการ เช่น ในรูปตัวอย่าง เลือกไปที่ onClick เป็นต้น ดังรูป

ที่รูปข้างต้นในช่องขวามือของ Event พิมพ์โค้ด ดังนี้

alert('DwThai.Com');

5. ทำการ Save ไฟล์และทำการกด F12 เพื่อ Preview ดูผลกับ Web Browser
6. ทดสอบโดยการกดไปที่ปุ่มที่เรากำหนด Event จะเกิด Alert ขึ้น ดังรูป

*alert() เป็น Function สำหรับการสร้าง Pop-Up หรือหน้าต่างแจ้งเตือนของภาษา JavaScript

เราจะพบว่า Events นั้นจะมีการใช้งานร่วมกับ JavaScript ดังนั้น หากท่านต้องการศึกษาเรื่องของ JavaScript ท่านก็ต้องมีความรู้เรื่อง Event Handler นี้ ในทางกลับกัน เมือท่านได้ศึกษา Event Handler นี้ ท่านก็ต้องมีความรู้เรื่องของ JavaScript ด้วยเช่นเดียวกันครับ อย่างไรลองศึกษากันดู...สวัสดีครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การ Layout โครงสร้างหน้าเว็บ (Web Page Layout)

เรื่อง :: การ Layout โครงสร้างหน้าเว็บเพจหน้าเว็บเพจ การ Layout คือ การกำหนดโครงร่างหรือโครงสร้างของหน้า...

การตรวจสอบรูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page

เรื่อง : การตรวจสอบไฟล์รูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page คุณอาจจะเคยมีปัญหาเกี่ยวกับการ Insert รูปภาพ (Images) มาใช้...

ความหมายของสี อารมณ์แห่งสีสัน

เรื่อง : มารู้จักกับสี-ความหมายของสี อารมณ์แห่งสีสัน ...

ส่องวิวัฒนาการของ “โปรแกรมเขียนเว็บ” จากอดีต สู่ปัจจุบัน ไปยังอนาคต

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