จากตัวอย่างเป็นการเรียกฟังก์ชั่น test() หลังจากเขียนฟังก์ชั่นแล้วทันที  ซึ่งจริง ๆ แล้วโปรแกรมเมอร์ทั่วไปจะไม่นิยมเขียนกัน แต่ที่นำมายกตัวอย่างเพื่อให้เข้าใจได้ง่าย ให้ดูจากการนำไปใช้จริงจากโปรแกรมต่อไปนี้  ในเรื่องกาจัดการกับ Event


การจัดการ Event


    Event คือ   เหตุการณ์ที่เกิดขึ้นขณะผู้ใช้กระทำกับวัตถุหรือสิ่งต่าง ๆ ที่เกิดขึ้นบนจอภาพ เช่น การคลิกปุ่ม การวางเมาส์บนรูปภาพ   การวางเมาส์เหนือข้อความ   หรือการกดแป้นพิมพ์ เป็นต้น ให้พิจารณาตัวอย่าง Event ต่อไปนี้


onClick


onClick เป็นเหตุการณ์หรือพฤติกรรมที่ผู้ใช้คลิกเมาส์ที่ปุ่มใด ๆ ที่เราเขียนคำสั่งไว้รองรับการกดปุ่มจากผู้ใช้  ให้ดูตัวอย่างต่อไปนี้


<script>

function f1()

{

alert("Thank you!")

}

</script>

<form>

<input type="button" value="Click here" onClick="f1()">

</form>



ภาพที่ 12 ผลการทำงานของโปรแกรม 


         เมื่อเราคลิกที่ปุ่ม Click here จะเกิด Message Box ข้อความ Thank you! เกิดขึ้น  อธิบายการทำงานของโปรแกรมได้ดังนี้ 

                

        เมื่อดูจาก Tag ในการสร้างปุ่มซึ่งอยู่ Tag Form     คำสั่งในการสร้างปุ่มคือ <input type="button" value="Click here">    การตั้งชื่อปุ่มให้ตั้งชื่อที่ value=”ชื่อปุ่ม 


คำสั่ง   onClick="f1()" เป็นเหตุการณ์ถ้าเราคลิกปุ่มนี้ทำให้โปรแกรมไปเรียกฟังก์ชั่น f1() มาทำงาน


Tip การใส่คำสั่งสำหรับ Event ต่างไม่จำเป็นต้องอยู่ภายใน <Script> Tag  แต่ให้อยู่ใน Tag ของ  HTML ได้


onLoad()


onLoad จะใช้ในกรณีที่ผู้ใช้เรียกใช้เว็บหรือการ Load เว็บนั้นมาครั้งแรก การใช้ Event onLoad นั้นนิยมใช้กับ Tag ของ HTML  ให้พิจารณาจากตัวอย่าง


 

<body onload="document.form1.name.focus()">

<form name="form1" method="post" action="">

  <input name="name" type="text" id="name">

</form>

</body>

ภาพที่ 13 ผลการทำงานของโปรแกรม

 


        เมื่อเราสั่งให้โปรแกรมทำงาน จะมี Text Field และจะมี Cursor ให้ผู้ใช้พร้อมพิมพ์ข้อมูลได้ทันที   โดยไม่ต้องนำเมาส์มาคลิกให้เสียเวลา เราจะเจอการทำงานในลักษณะนี้ใน Free Web Mail ทั่วไปเช่น www.hotmail.com, mail.yahoo.com เป็นต้น อธิบายการทำงานของโปรแกรมได้ดังนี้



Object document


<body onload="document.form1.name.focus()">

<form name="form1" method="post" action="">

  <input name="name" type="text" id="name">

</form></body>


ในโปรแกรมนี้เป็นการใช้คำสั่ง Event onLoad ของ JavaScript มาใส่ใน Tag ของ HTML แต่มีรูปแบบของ JavaScript ดังนี้  onLoad=”document.FormName.TextFieldName.focus()” 


            onLoad เป็น Event หนึ่งที่เราต้องการให้กระทำในขณะที่โปแกรมนี้ถูก Execute

document  เป็นชื่อ  object มาตรฐาน object หนึ่ง

            FormName เป็นชื่อ ฟอร์มใน HTML

            TextFieldName เป็นชื่อ Text Field ที่เราต้องการให้ Cursor กระพริบอยู่

            Focus() เป็นคุณสมบัติของ Text Field คือ การกระพริบของ Cursor นั่นเอง


    มีข้อพึงระวังอยู่ที่ FormName และ TextFieldName ต้องตรงกับชื่อใน Tag HTML ถ้าไม่เป็นตามนั้น JavaScript จะเตือนด้วย Message Box ดังนี้


ภาพที่ 14 ผลการทำงานของโปรแกรม