Latest web development tutorials
×

JavaScript & HTML DOM คู่มืออ้างอิง

ภาพรวม

JavaScript วัตถุ

JavaScript Array วัตถุ JavaScript Boolean วัตถุ JavaScript Date วัตถุ JavaScript Math วัตถุ JavaScript Number วัตถุ JavaScript String วัตถุ JavaScript RegExp วัตถุ JavaScript อสังหาริมทรัพย์ทั่วโลก / ฟังก์ชั่น JavaScript ผู้ประกอบการ

Browser วัตถุ

Window วัตถุ Navigator วัตถุ Screen วัตถุ History วัตถุ Location วัตถุ

DOM วัตถุ

HTML DOM Document วัตถุ HTML DOM วัตถุธาตุ HTML DOM แอตทริบิวต์วัตถุ HTML DOM วัตถุที่จัดกิจกรรม

HTML วัตถุ

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

วัตถุเหตุการณ์ HTML DOM

เหตุการณ์ HTML DOM

เหตุการณ์ HTML DOM ช่วยให้จาวาสคริปต์ลงทะเบียนจัดการเหตุการณ์ที่แตกต่างกันในองค์ประกอบเอกสาร HTML

เหตุการณ์ที่เกิดขึ้นมักจะใช้ร่วมกับฟังก์ชั่นการทำงานจะไม่ได้รับการดำเนินการก่อนที่จะมีเหตุการณ์เกิดขึ้น! (เช่นผู้ใช้คลิกปุ่ม)

เคล็ดลับ: การจำลองเหตุการณ์ในมาตรฐาน W3C ระดับ 2 เหตุการณ์ DOM

เหตุการณ์ HTML DOM

DOM: แอตทริบิวต์ DOM แสดงถึงระดับของการใช้งาน

เหตุการณ์ของเมาส์

คุณสมบัติ ลักษณะ DOM
onclick เหตุการณ์ที่เรียกว่าเมื่อผู้ใช้คลิกที่จับวัตถุ 2
OnContextMenu เรียกเมื่อผู้ใช้คลิกปุ่มเมาส์ขวาเพื่อเปิดเมนูบริบท
ondblclick เหตุการณ์ที่เรียกว่าเมื่อผู้ใช้ดับเบิลคลิกที่จับวัตถุ 2
onmousedown เมาส์ปุ่มกด 2
onmouseenter ไฟไหม้เมื่อย้ายตัวชี้เมาส์กับองค์ประกอบ 2
onmouseleave เมื่อชี้เมาส์ย้ายออกจากองค์ประกอบไก 2
OnMouseMove เมาส์จะถูกย้าย 2
onmouseover เลื่อนเมาส์ไปที่องค์ประกอบ 2
MV โดน เมาส์ออกไปจากองค์ประกอบ 2
onmouseup ปุ่มเมาส์จะถูกปล่อยออก 2

เหตุการณ์แป้นพิมพ์

属性 描述 DOM
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2

กรอบ / วัตถุ (กรอบ / Object) เหตุการณ์

属性 描述 DOM
onabort 图像的加载被中断。 ( <object>) 2
onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
onload 一张页面或一幅图像完成加载。 2
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。 2
onscroll 当文档被滚动时发生的事件。 2
onunload 用户退出页面。 ( <body> 和 <frameset>) 2

เหตุการณ์ที่เกิดขึ้นในแบบฟอร์ม

属性 描述 DOM
onblur 元素失去焦点时触发 2
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2
onfocus 元素获取焦点时触发 2
onfocusin 元素即将获取焦点时触发 2
onfocusout 元素即将失去焦点时触发 2
oninput 元素获取用户输入时触发 3
onreset 表单重置时触发 2
onsearch 用户向搜索域输入文本时触发 ( <input="search">)  
onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2
onsubmit 表单提交时触发 2

เหตุการณ์คลิปบอร์ด

คุณสมบัติ ลักษณะ DOM
oncopy กรณีที่มีการเรียกเมื่อผู้ใช้สำเนาเนื้อหาองค์ประกอบ
oncut กรณีที่มีการเรียกเมื่อผู้ใช้เนื้อหาองค์ประกอบเฉือน
onpaste กรณีที่มีการเรียกเมื่อผู้ใช้วางเนื้อหาองค์ประกอบ

เหตุการณ์พิมพ์

คุณสมบัติ ลักษณะ DOM
onafterprint เหตุการณ์ทริกเกอร์ได้เริ่มต้นแล้วพิมพ์หน้าหรือพิมพ์หน้าต่างถูกปิดไปแล้ว
onbeforeprint กรณีที่มีการเรียกเมื่อหน้าเป็นเรื่องเกี่ยวกับที่จะเริ่มต้นการพิมพ์

เหตุการณ์ลาก

เหตุการณ์ ลักษณะ DOM
ondrag กรณีที่มีการเรียกเมื่อองค์ประกอบที่จะถูกลาก
ondragend กรณีที่มีการเรียกเมื่อผู้ใช้ลากองค์ประกอบที่จะเสร็จสมบูรณ์
OnDragEnter เหตุการณ์นี้จะถูกเรียกเมื่อองค์ประกอบลากเข้าไปในเป้าหมายลดลง
ondragleave เหตุการณ์นี้จะถูกเรียกเมื่อองค์ประกอบลากออกไปจากเป้าหมายลดลง
OnDragOver กรณีที่มีการเรียกเมื่อเป้าหมายที่วางอยู่ในองค์ประกอบลาก
ondragstart กรณีที่มีการเรียกเมื่อผู้ใช้เริ่มการลากองค์ประกอบ
ondrop เหตุการณ์นี้จะถูกเรียกเมื่อองค์ประกอบลากจะอยู่ในพื้นที่เป้าหมาย

มัลติมีเดีย (Media) ที่จัดกิจกรรม

เหตุการณ์ ลักษณะ DOM
onabort วิดีโอเหตุการณ์ / เสียง (Audio / Video) เพื่อยุติการทริกเกอร์เมื่อโหลด
oncanplay เมื่อมีเหตุการณ์จะถูกเรียกในผู้ใช้สามารถเริ่มเล่นวิดีโอ / เสียง (Audio / Video)
oncanplaythrough ทริกเกอร์เหตุการณ์สามารถเล่นในวิดีโอปกติ / เสียง (Audio / Video) และไม่มีการหยุดชั่วคราวและบัฟเฟอร์
ondurationchange วิดีโอเหตุการณ์ / เสียง (Audio / Video) ระยะเวลาการเปลี่ยนแปลงทริกเกอร์
onemptied รายการทริกเกอร์เป็นที่ว่างเปล่าผู้เล่นปัจจุบัน
onended ในตอนท้ายของการเล่นในวิดีโอเรียกเหตุการณ์ / เสียง (Audio / Video)
onerror เหตุการณ์เรียกเมื่อมีข้อผิดพลาดเกิดขึ้นในระหว่างภาพ / เสียง (Audio / Video) ข้อมูลที่มีการโหลด
onloadeddata เหตุการณ์ในเบราว์เซอร์เพื่อโหลดภาพ / เสียง (Audio / Video) ทริกเกอร์เฟรมปัจจุบัน
onloadedmetadata เมตาดาต้าเหตุการณ์ที่ระบุภาพ / เสียง (Audio / Video) ทริกเกอร์หลังจากโหลด
onloadstart เหตุการณ์ในเบราว์เซอร์ที่จะเริ่มมองระบุภาพ / เสียง (Audio / Video) ทริกเกอร์
onPause ทริกเกอร์เหตุการณ์ในวิดีโอ / เสียง (Audio / Video) หยุดชั่วคราว
onplay งานอีเว้นท์ทริกเกอร์ที่จะเริ่มเล่นวิดีโอ / เสียง (Audio / Video)
onplaying วิดีโอเหตุการณ์ / เสียง (Audio / Video) หลังจากหยุดชั่วคราวหรือบัฟเฟอร์จะถูกเรียกเมื่อพร้อมที่จะเริ่มเล่นอีกครั้ง
onprogress งานอีเว้นท์ทริกเกอร์ (เสียง / วิดีโอ) ที่ระบุไว้ในเบราว์เซอร์ในการดาวน์โหลดวิดีโอ / เสียง
onratechange เรียกเหตุการณ์การเปลี่ยนแปลงเมื่อมีการส่งภาพ / เสียง (Audio / Video) ความเร็วในการเล่น
onseeked ในกรณีที่ผู้ใช้สามารถปรับตำแหน่งของภาพ / เสียง (Audio / Video) ตำแหน่งการเล่นทริกเกอร์
onseeking ไฟไหม้เมื่อผู้ใช้เริ่มที่จะเปลี่ยนตำแหน่งวิดีโอเหตุการณ์ / เสียง (Audio / Video)
onstalled ได้รับข้อมูลเหตุการณ์สื่อในเบราว์เซอร์ แต่ข้อมูลสื่อไม่พร้อมใช้งานเมื่อมีการเรียก
onsuspend เหตุการณ์ระงับการเรียกข้อมูลสื่อในเบราว์เซอร์ในการอ่าน
ontimeupdate เหตุการณ์เรียกเมื่อตำแหน่งการเล่นในปัจจุบันจะส่งการเปลี่ยนแปลง
onvolumechange เหตุการณ์เรียกเมื่อเปลี่ยนระดับเสียง
onwaiting เนื่องจากเหตุการณ์ที่เกิดขึ้นจะถูกเรียกเมื่อวิดีโอที่คุณต้องการที่จะเล่นบัฟเฟอร์เฟรมถัดไปจะต้อง

เหตุการณ์ที่เกิดขึ้นนิเมชั่น

เหตุการณ์ ลักษณะ DOM
animationend เหตุการณ์นี้จะถูกเรียกเมื่อภาพเคลื่อนไหวเล่นจบ CSS
animationiteration เหตุการณ์นี้จะถูกเรียกเมื่อภาพเคลื่อนไหว CSS ซ้ำ
animationstart เหตุการณ์นี้จะถูกเรียกเมื่อเคลื่อนไหวจะเริ่มเล่น CSS

เหตุการณ์การเปลี่ยนแปลง

เหตุการณ์ ลักษณะ DOM
transitionend กรณีที่มีการเรียกหลังจาก CSS เพื่อความสมบูรณ์ของการเปลี่ยนแปลง

กิจกรรมอื่น ๆ

เหตุการณ์ ลักษณะ DOM
OnMessage เมื่อมีเหตุการณ์เกิดขึ้นโดยหรือจากวัตถุ (WebSocket, Web Worker, แหล่งของเหตุการณ์ย่อยหรือกรอบหรือหน้าต่างหลัก) ได้รับข้อความ
OnMouseWheel ล้าสมัย ใช้ onwheel แทนเหตุการณ์
ononline เหตุการณ์นี้จะถูกเรียกเมื่อเบราว์เซอร์ในการทำงานออนไลน์
onoffline เหตุการณ์นี้จะถูกเรียกเมื่อเบราว์เซอร์ควรเริ่มต้นการทำงานแบบออฟไลน์
onpopstate เหตุการณ์นี้จะถูกเรียกเมื่อเรียกดูประวัติ (วัตถุประวัติศาสตร์) ของการเปลี่ยนแปลงหน้าต่าง
onshow เหตุการณ์เมื่อ <เมนู> องค์ประกอบที่จะแสดงในทริกเกอร์เมนูบริบท
onstorage เหตุการณ์นี้จะถูกเรียกเมื่อเก็บข้อมูลบนเว็บ (HTML 5 ร้านค้าในเว็บไซต์) การปรับปรุง
ontoggle กรณีที่มีการเรียกเมื่อผู้ใช้เปิดหรือปิด <รายละเอียด> องค์ประกอบ
onwheel เหตุการณ์นี้จะถูกเรียกเมื่อล้อเมาส์เพื่อเลื่อนขึ้นและลงในองค์ประกอบของ

วัตถุที่จัดกิจกรรม

คงที่

静态变量 描述 DOM
CAPTURING-PHASE 当前事件阶段为捕获阶段(3) 1
AT-TARGET 当前事件是目标阶段,在评估目标事件(1) 2
BUBBLING-PHASE 当前的事件为冒泡阶段 (2) 3

คุณสมบัติ

คุณสมบัติ ลักษณะ DOM
ฟองฟอด ส่งกลับค่าบูลีนที่บ่งชี้ว่าเหตุการณ์ที่เกิดขึ้นเป็นชนิดเหตุการณ์เดือด 2
ยกเลิก ส่งกลับค่าบูลีนที่บ่งชี้ว่าเหตุการณ์ที่เกิดขึ้นสามารถยกเลิกโปรดำเนินการเริ่มต้น 2
currentTarget ผลตอบแทนที่ได้ฟังเหตุการณ์เรียกองค์ประกอบเหตุการณ์ 2
eventPhase ผลตอบแทนขั้นตอนปัจจุบันของการแพร่กระจายเหตุการณ์ 2
เป้า ผลตอบแทนที่ได้องค์ประกอบที่เรียกเหตุการณ์นี้ (โหนดเป้าหมายเหตุการณ์) 2
การประทับเวลา ส่งกลับวันที่และเวลาของเหตุการณ์ที่เกิดขึ้น 2
ชนิด ส่งกลับชื่อของเหตุการณ์ปัจจุบันวัตถุเหตุการณ์หมายถึง 2

ทาง

方法 描述 DOM
initEvent() 初始化新创建的 Event 对象的属性。 2
preventDefault() 通知浏览器不要执行与事件关联的默认动作。 2
stopPropagation() 不再派发事件。 2

วัตถุเหตุการณ์เป้าหมาย

ทาง

方法 描述 DOM
addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) 2

วัตถุ Listener เหตุการณ์

ทาง

方法 描述 DOM
handleEvent() 把任意对象注册为事件处理程序 2

เหตุการณ์วัตถุเอกสาร

ทาง

方法 描述 DOM
createEvent() 2

เมาส์ / แป้นพิมพ์วัตถุเหตุการณ์

คุณสมบัติ

属性 描述 DOM
altKey 返回当事件被触发时，"ALT" 是否被按下。 2
button 返回当事件被触发时，哪个鼠标按钮被点击。 2
clientX 返回当事件被触发时，鼠标指针的水平坐标。 2
clientY 返回当事件被触发时，鼠标指针的垂直坐标。 2
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。 2
Location 返回按键在设备上的位置 3
charCode 返回onkeypress事件触发键值的字母代码。 2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 2
which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 2
metaKey 返回当事件被触发时，"meta" 键是否被按下。 2
relatedTarget 返回与事件的目标节点相关的节点。 2
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 2
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 2
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。 2

ทาง

方法 描述 W3C
initMouseEvent() 初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3