About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





ค้นหาข้อมูลใน 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

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



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

เปลี่ยน Cursor หรือตัวชี้เมาท์ง่าย ๆ สไตล์เรา

เรื่อง : เปลี่ยน Cursor หรือตัวชี้ของเมาท์บนหน้าเว็บเพจ มีแฟนเว็บไถ่ถามกันเข้ามาว่า...จะเปลี่ยนรูปร่างของเมาท์ให้เป็นรู...  

สิ่งที่ควรคิดก่อนการจัดทำ Website

เรื่อง : สิ่งที่ควรคิดก่อนการจัดทำ Website สัก 1 เว็บ การที่ Website หรือ Internet เข้ามามีบทบาทในสังคมเราทุกวันนี้ ได้นำ...  

เรื่องสถานะของ Link

เรื่อง : สถานะของ Link ที่นักพัฒนาเว็บควรรู้และเข้าใจ Link (ลิงค์) หรือจุดเชื่อมโยง เป็นเอกลักษณ์อย่างหนึ่...  

ทำความเข้าใจพื้นฐานการสร้าง Website

เรื่อง :: ทำความเข้าใจพื้นฐานการสร้าง Website (คำถามคาใจสำหรับผู้เริ่มต้น)หลายครั้งที่ผมมักจะได้รับคำถาม ไม่ว่าจะทาง...  


Copyright ©2003-2018 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*