สวัสดีครับหลังจากที่เราได้ทำความรู้จักกับ DOM Property และ DOM Method ไปแล้ว วันนี้ผมจะมาแนะนำให้รู้จักกับ DOM Event ว่ามีลักษณะอย่างไรกันนะครับ
-------------------------------------------------------------
Event
คือ เหตุการณ์ที่เกิดจากการกระทำโดย user หรือ system ซึ่ง Event ของ HTML DOM นั้นเกิดโดยการเขียน Javascript เข้าไปกำหนดเหตุการณ์นั่นเอง
ตัวอย่างของ Event
- การคลิกเมาส์ เช่น onClick
- การโหลดของหน้าเว็บหรือรูปภาพ เช่น onLoad
- การวาง cursur mouse ไว้บน object เช่น onMouseOver
.
.
.
เป็นต้น
-------------------------------------------------------------
onClick
เป็นเหตุการณ์เมื่อเราทำการคลิกเมาส์ ณ object ตัวใดตัวหนึ่งหรือคลิก ณ ตำแหน่งของ Tag HTML ที่มี Event ตัวนี้เป็น attribute อยู่ โดยเมื่อเราคลิกไปที่จุดดังกล่าวแล้วจะกำหนดให้เราไปทำยังเหตุการณ์ต่อไปที่กำหนดไว้ เช่น
"< xxxx="xxx" onclick="test()">"
จากตัวอย่างเมื่อทำการคลิกแล้วจะทำการเรียกใช้งาน test function
-------------------------------------------------------------
onLoad
เป็นเหตุการณ์เมื่อมีการโหลดสิ่งใดสิ่งหนึ่งขึ้นมาบนหน้าเว็บ แล้วสั่งให้ทำเหตุการณ์ตามที่กำหนดไว้ เช่น
"< onload="test()">"
จากตัวอย่างเมื่อทำการโหลดหน้านั้นขึ้นมาจะทำการเรียกใช้งาน test function
-------------------------------------------------------------
onMouseOver
เป็นเหตุการณ์เมื่อเราทำการนำเอาเมาส์ไปวางบน object ตัวใดตัวหนึ่ง ที่มีการแทรก Event นี้อยู่ใน attribute ของ Tag นั้นๆ เช่น
"< type="xxx" name="xxx" onmouseover="test()">"
จากตัวอย่างเมื่อนำเมาส์มาวางบน object นี้จะทำการเรียกใช้งาน test function
-------------------------------------------------------------
จากตัวอย่างทั้งสามที่ยกมาคงจะพอทำให้เราเข้าใจถึง HTML DOM Event ว่ามีลักษณะและการทำงานเช่นไรบ้าง สำหรับ Event นั้นยังมีอีกมากมายหลายชนิดซึ่งเราสามารถค้นหาเพื่อศึกษาหรือนำไปประยุกต์ใช้งานกันต่อไปได้ สำหรับวันนี้คงพอแค่นี้ก่อนนะครับไว้เจอกันครั้งต่อไป
โดย: Phiphat_G
ขอขอบคุณ: www.w3scools.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น