การจัดการกับเหตุการณ์ Event Handling ง40208 การเขียนไดนามิกเว็บเพจ ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดงพิทยาคม
Event Handler คืออะไร Event Handler คือการตอบสนองต่อเหตุการณ์ (Event) ที่เกิดขึ้นจากการกระทำลงในเว็บเพจ ในลักษณะของการโต้ตอบโดยทันทีที่มีเหตุการณ์ใด ๆ กระทำลงไปในฟอร์ม หรือออบเจ็กที่กำหนด เพื่อไปกระตุ้นให้คำสั่งของ JavaScript ทำงาน เช่นการคลิ๊กเมาส์บนปุ่มกด หรือการเลื่อนเมาส์ เข้าไปในรูปก็จะทำให้เว็บเพจมีการเปลี่ยนแปลงตามคุณสมบัติของเหตุการณ์ต่างๆ ที่กำหนด เป็นต้น
การกำหนด Event Handler เราสามารถกำหนดอีเวนต์แฮนด์เลอร์ให้ทำงานร่วมกับ tag HTML และภาษาจาวาสคริปต์ ได้ โดยมีรูปแบบการเขียนดังนี้ <HTML> <HEAD></HEAD> <BODY> <INPUT TYPE="submit" Value="OK" onClick="alert('สวัสดีครับ');"> </BODY> </HTML>
onAbort อีเวนต์แฮนด์เลอร์ onAbort ใช้ตอบสนองต่อเหตุการณ์สำหรับขัดจังหวะการประมวลผล ของโปรแกรม เช่น การกดคลิ๊กที่ปุ่ม Stop บนบราวเซอร์ในเว็บเพจเพื่อให้หยุดการโหลดรูปภาพ
ตัวอย่าง onAbort <HTML> <HEAD><TITLE> Example of onAbort Event Handler </TITLE></HEAD> <BODY> <H3><CENTER>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onAbort</CENTER></H3> คลิ๊กปุ่ม Stop บนบราวเซอร์เพื่อหยุดการโหลดรูปภาพ<BR> <IMG SRC="http://www.sukhum-th.com/img_Abort.jpg" onAbort="alert('หยุดการโหลดรูปภาพสำเร็จ')">
onBlur อีเวนต์แฮนด์เลอร์ onBlur ใช้ตอบสนองต่อเหตุการณ์สำหรับออบเจ็กต่างๆ ที่อยู่บนฟอร์ม เกิดการสูญเสียโฟกัส (Focus) เช่นมีการกรอกข้อมูลลงในฟอร์ม แล้วนำเมาส์ไปคลิ๊กบนพื้นที่ที่ไม่ใช่ เป็นส่วนของฟอร์ม onBlur ก็จะทำงาน
ตัวอย่าง onBlur <HTML> <TITLE> Example of onBlur Event Handler </TITLE> <HEAD></HEAD> <BODY> <H3><CENTER>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onBlur</CENTER></H3> คลิ๊กเมาส์ลงในช่องกรอกข้อมูล แล้วคลิ๊กเมาส์นอกช่องกรอกข้อมูลอีกครั้ง <FORM NAME="MyForm"> เชิญคลิ๊ก:<INPUT TYPE="Text" NAME="Data" onBlur="(document.bgColor='Gold')"><BR> </FORM> </BODY>
onChange เวนต์แฮนด์เลอร์ onChange ใช้ตอบสนองต่อเหตุการณ์เมื่อมีการเปลี่ยนแปลงข้อมูลในฟิลด์ (Field) บนฟอร์ม
<HTML> <HEAD><TITLE> Example of onChange Event Handler </TITLE> <SCRIPT LANGUAGE="JavaScript"> function NewData(){ input=document.MyForm.Data.value; alert("คุณเปลี่ยนค่าตัวเลขจาก 999 เป็น " + input ); } </SCRIPT> </HEAD> <BODY> <H3><CENTER>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onChange</CENTER></H3> เปลี่ยนค่าตัวเลขในช่องกรอกข้อมูล แล้วคลิ๊กเมาส์นอกช่องกรอกข้อมูลอีกครั้ง <FORM NAME="MyForm"> Number:<INPUT TYPE="Text" NAME="Data" VALUE="999" onChange=NewData()><BR> </FORM> </BODY> </HTML>
onClick อีเวนต์แฮนด์เลอร์ onClick ใช้ตอบสนองต่อเหตุการณ์เมื่อมีการกดคลิ๊กเมาส์ลงบนออบเจ็กต์ หรือพื้นที่ที่กำหนดบนฟอร์ม
<HTML> <HEAD><TITLE> Example of onClick Event Handler </TITLE> <SCRIPT LANGUAGE="JavaScript"> function DataName(){ name=document.MyForm.Data.value; alert("สวัสดีคุณ " + name ); } </SCRIPT> </HEAD> <BODY> <H3><CENTER>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onClick</CENTER></H3> ป้อนชื่อแล้วคลิ๊กปุ่ม OK <FORM NAME="MyForm"> ชื่อ:<INPUT TYPE ="Text" name="Data" value="" size=15> <INPUT TYPE="Button" VALUE="OK" onClick="DataName()"> </FORM> </BODY> </HTML>
onFocus อีเวนต์แฮนด์เลอร์ onFocus ใช้ตอบสนองต่อเหตุการณ์เมื่อออบเจ็กต์ที่กำหนดได้แอ็กทีฟ (Active) เช่นเมื่อคลิ๊กเมาส์ลงในช่องกรอกข้อมูลจะทำให้อีเวนต์แฮนด์เลอร์ onFocus ทำงาน
<HTML> <TITLE> Example of onFocus Event Handler </TITLE> <HEAD></HEAD> <BODY> <H3><CENTER>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onFocus</CENTER></H3> คลิ๊กเมาส์ลงในช่องกรอกข้อมูล แล้วคลิ๊กเมาส์นอกช่องกรอกข้อมูลอีกครั้ง<BR> <FORM NAME="Form_1"> เชิญคลิ๊ก:<INPUT TYPE="Text" NAME="Data" onFocus="(document.bgColor='Gold')"> </FORM>
onLoad อีเวนต์แฮนด์เลอร์ onLoad ใช้ตอบสนองต่อเหตุการณ์ที่เกิดขึ้นจากการโหลดหน้าเว็บเพจ โดยต้องเขียนไว้ใน tag <BODY> หรือ tag <FRAMESET>
<HTML> <TITLE>Example of onLoad Event Handler</TITLE> <HEAD> <SCRIPT LANGUGE="JavaScript"> function hello(){ alert("ยินดีต้อนรับ...\nขอให้มีความสุขกับการใช้งานจาวาสคริปต์"); } </SCRIPT> </HEAD> <BODY onLoad="hello()"> <H3><CENTER>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onLoad</CENTER></H3> </BODY> </HTML>
onMouseOver อีเวนต์แฮนด์เลอร์ onMouseOver ใช้ตอบสนองต่อเหตุการณ์เมื่อมีการเลื่อนเมาส์ไปวางบน ออบเจ็กต์หรือพื้นที่ที่กำหนด เช่นเมื่อนำเมาส์ไปวางบนรูปภาพจะทำให้อีเวนต์แฮนด์เลอร์ onMouseOver ทำงาน
<HTML> <TITLE>Example of onMouseOver Event Handler</TITLE> <HEAD> <SCRIPT LANGUGE="JavaScript"> function hello() { alert("ยินดีต้อนรับ...\nขอให้มีความสุขกับการใช้งาน MouseOver Event Handler"); } </SCRIPT> </HEAD> <BODY ><CENTER> <H3>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onMouseOver</H3> <IMG SRC= "Sunset.JPG" WIDTH =200 HEIGHT=150 OnMouseOver=hello()><P> กรุณาเลื่อนเมาส์เข้าไปในรูป<HR></CENTER> </BODY> </HTML>
onMouseOut อีเวนต์แฮนด์เลอร์ onMouseOut ใช้ตอบสนองต่อเหตุการณ์เมื่อมีการเลื่อนเมาส์ออกจาก ออบเจ็กต์หรือพื้นที่ที่กำหนด เช่นเมื่อขณะที่เมาส์วางอยู่บนรูปภาพแล้วเลื่อนเมาส์ออกจากรูปภาพ จะทำให้อีเวนต์แฮนด์เลอร์ onMouseOut ทำงาน
<HTML> <TITLE>Example of onMouseOut Event Handler</TITLE> <HEAD> <SCRIPT LANGUGE="JavaScript"> function hello() { alert("ยินดีต้อนรับ...\nขอให้มีความสุขกับการใช้งาน MouseOut Event Handler"); } </SCRIPT> </HEAD> <BODY ><CENTER> <H3>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onMouseOut</H3> <IMG SRC="Sunset.JPG" WIDTH =200 HEIGHT=150 ALT="เลื่อนเมาส์ออกจากรูป" OnMouseOut=hello()><P> กรุณาเลื่อนเมาส์เข้าไปในรูป แล้วเลื่อนเมาส์ออกจากรูป <HR></CENTER> </BODY> </HTML>
onReset อีเวนต์แฮนด์เลอร์ onReset ใช้ตอบสนองต่อเหตุการณ์เมื่อมีกดปุ่ม Reset จะทำให้ข้อมูลที่อยู่ ในฟอร์มนั้นหายไป โดยอีเวนต์แฮนด์เลอร์ onReset ต้องเขียนไว้ใน tag<FORM>
<HTML> <TITLE>Example of onReset Event Handler</TITLE> <HEAD></HEAD> <BODY> <CENTER><H3>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onReset </H3> กรุณาป้อนข้อมูลลงในช่องกรอกข้อความ แล้วกดปุ่ม Reset Data <FORM NAME="myform" onReset="alert('ลบข้อมูลในฟอร์มด้วยอีเวนต์แฮนด์เลอร์ onReset')"> ป้อนข้อความ: <INPUT TYPE="Text" NAME="Data" VALUE="" size="20"> <INPUT TYPE="Reset" NAME="Myreset" VALUE="Reset Data" > </FORM></CENTER> </BODY>
onSelect อีเวนต์แฮนด์เลอร์ onSelect ใช้ตอบสนองต่อเหตุการณ์เมื่อมีการเลือกข้อมูลทั้งหมด หรือ บางส่วนของข้อมูลที่อยู่ใน Textfield
<HTML> <TITLE>Example of onSelect Event Handler</TITLE> <HEAD></HEAD> <BODY> <CENTER><H3>ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onSelect </H3> กรุณาเลือกข้อความในช่องกรอกข้อความ<br> <FORM NAME="Myform"> <INPUT TYPE="Text" NAME="Data" VALUE="onSelect Event Handler" size=25 onSelect="alert('ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onSelect')"> </FORM> </CENTER> </BODY> </HTML>