Event Handling

Event ก็คือ Action ต่างๆที่เกิดขึ้นกับส่วนต่างๆใน Site ของเราเช่น เมื่อเราเอา mouse ไปทับตัว link ก็จะเกิด event onmouseover ที่ตัว link พอเอา mouse ออก ก็จะเกิด event onmouseout พอเรา click ก็จะเกิด event onclick เป็นต้น

การทำงานของ event ก็จะมีอยู่ 2 ขั้นตอน คือ
1. ตรวจสอบการเกิด event ที่เรากำหนดไว้
2. เมื่อเกิด event ขึ้น ก็จะไปเรียก function หรือคำสั่งต่างๆมาทำงาน

ถึงตรงนี้ท่านคงเดาออกแล้วนะครับว่า การเปลี่ยนภาพเวลาเอา mouse ไปทับ ทำยังไง เขาก็ใช้ event นี่แหละครับ ที่นี้ เจ้า event มันใช้ยังไงล่ะก็ไม่ยากครับ อ่านต่อไปเรื่อยๆ จบหน้านี้คุณก็จะใช้ event ไปเพิ่มลูกเล่นใน Homepage ได้แล้วครับ
How to Use Event
เราจะใส่ event ลงไปใน tag ของ html เลย เช่น เวลาจะทำตัว link เราใช้ tag A ใช่ไหมครับ ถ้าผมจะทำให้มันมีข้อความ Alert ขึ้นเวลาเอา mouse ไป over ผมจะทำอย่างนี้ครับ

<a href="page2.html" onmouseover="window.alert('Onmouseover ทำงานแล้วจ้า')">Page2</a>
ก็จะได้แบบนี้ครับ
Page2
ส่วน window.alert() เป็นคำสั่งในการแสดงข้อความครับ

ผมก็มีตาราง event ทั้งหมดมาให้ดูกันครับ

Event Name Description

onAbort Occurs when the user aborts the loading of an image

onBlur Occurs when an object on the page loses focus

onChange Occurs when a text field is changed by the user

onClick Occurs when the user clicks on an item

onError Occurs when a document or image can't load correctly

onFocus Occurs when an item gains focus

onLoad Occurs when the page (or an image) finishes loading

onMouseOver Occurs when the mouse pointer moves over an item

onMouseOut Occurs when the mouse pointer moves off an item

onSelect Occurs when the user selects text in a text area

OnSubmit Occurs when a submit button is pressed

OnUnload Occurs when the user leaves the document or exits

ดูไม่รู้เรื่อง แปลไม่ออก ไม่เป็นไรครับ อ่านต่อข้างล่างเล้ย...

Link Event

Event ของ ของตัว link ก็มีอยู่ 3 ตัวนะครับ ซึ่งคุณก็พอจะเคยเจอมาบ้างแล้วคือ onmouseover onmouseout และ onclick ครับ
onmouseover คุณคงจะเป็นแล้วผมข้ามนะครับ
onmouseout ก็คือการเอา mouse ออกจาก link ที่มันทับอยู่
onclick ก็คือการ click ครับ

ตัวอย่างของการใช้ onmouseout และ onclick ครับ

Ad. Banner

Window&Frame Event

Event สำหรับ window กับ Frame ก็มีอยู่ 5 ตัวนะครับ

Event Name	Description
`onload`	ตอนเปิด window ขึ้นมา
`onunload`	ตอนปิด window
`onerror`	เมื่อเกิด error ตอนที่ load เสร็จแล้ว
`onfocus`	เมื่อ window ได้เป็นหน้าต่างปัจจุบัน
`onblur`	เมื่อเปลี่ยนหน้าต่างปัจจุบันไปเป็นหน้าต่างอื่น

ตัวอย่างการใช้ window&frame Event ครับ
<head> <title>Handling load event</title> </head> Handling load Event </font></font></table><br> <form> <input type="button" value="View Example" onclick="window.open('jsex19.html')"> </form> <font face="CordiaUPC">เรื่อง event เป็นเรื่องไม่ยาก ผมคิดว่าคุณคงได้ concept แล้วล่ะ ที่เหลือก็เป็น event ของ Form และ Image ที่คุณสามารถศึกษาเองจากตารางได้แล้วครับ ส่วนเรื่องการเปลี่ยนภาพตอน onmouseover ต้องพึ่งเรื่อง object อีกเรื่องครับ ผมก็ขอจบบทตรงนี้แล้วกันนะ </font> <TD valign=top> <font face="CordiaUPC"> </font></TD> <p align=right> <font face="CordiaUPC"><a href="jstuep7.html" onmouseover="document.next.src='nxcp.gif'" onmouseout="document.next.src='nxcpd.gif'"></a></font><a href="jstuep7.html" onmouseover="document.next.src='nxcp.gif'" onmouseout="document.next.src='nxcpd.gif'"><img src="nxcpd.gif" name="next" border=0></a><br> <a href="jstue.html" onmouseover="document.content.src='btct.gif'" onmouseout="document.content.src='btctd.gif'"><img src="btctd.gif" name="content" border=0></a><br> <a href="index.html" onmouseover="document.indexp.src='bthp.gif'" onmouseout="document.indexp.src='bthpd.gif'"><img src="bthpd.gif" name="indexp" border=0></a><br> <CENTER> </center><img src="../../../visit.geocities.com/visit.gifฟ1003936846" border=0 width=1 height=1> <IMG SRC="http://geo.yahoo.com/serv?s=76001077&t=1003936846" ALT=1 WIDTH=1 HEIGHT=1> </html>