เหตุการณ์ onmouseover จะถูกกระตุ้นเมื่อเคอร์เซอร์เมาส์เข้าสู่พื้นที่ขององค์ประกอบ HTML ใช้สำหรับ Hover Effects, Tooltips, Dropdown Menus, และการแสดงข้อมูลเพิ่มเติม ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h3 id=myid onmouseover=display() style=cursor: pointer; paddi

เหตุการณ์ onpause จะถูกกระตุ้นเมื่อสื่อ (วิดีโอ/เสียง) ถูกหยุดพัก ไม่ว่าจะเป็นการกด Pause โดยผู้ใช้ หรือผ่านโปรแกรม (video.pause()) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h2 id=test>เล่น</h2> <video id=myid width=320 height=176 controls onpause=myF

เหตุการณ์ onscroll จะถูกกระตุ้นเมื่อผู้ใช้เลื่อนเนื้อหาภายในองค์ประกอบที่มี Scrollbar (มี overflow: scroll หรือ auto) รวมถึง window (หน้าต่างทั้งหมด) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <style> #myid { width: 250px; height: 80p

เหตุการณ์ onreset จะถูกกระตุ้นเมื่อฟอร์มถูกรีเซ็ต (ผู้ใช้กดปุ่ม <input type=reset> หรือ <button type=reset>) ทำงานบนแท็ก <form> ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <form onreset=display()> <label>ชื่อนักศึกษา:<br>

เหตุการณ์ onresize จะถูกกระตุ้นเมื่อขนาดหน้าต่างเบราว์เซอร์ (Viewport) เปลี่ยนแปลง ใช้สำหรับปรับ Layout, เรียกคำนวณใหม่, หรืออัปเดต UI ที่ต้องรู้ขนาดจอ ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body onresize=display()> <p>ลองปรับขนาดหน้าต่างเบราว์เซอร์เพื่อทดสอบเหตุการณ์

แอตทริบิวต์ coords (Coordinates) ใช้ร่วมกับแท็ก <area> ภายใน <map> เพื่อกำหนดพิกัดของพื้นที่คลิกได้ (Hotspot) บนรูปภาพ (Image Map) รูปแบบพิกัดขึ้นอยู่กับ shape รูปแบบ coords ตาม Shape Shape รูปแบบ coords คำอธิบาย rect (สี่เหลี่ยม) x1,y1,x2,y2 มุมซ้ายบน (x1,y1) ถึง มุมขวาล่าง (x2,

แอตทริบิวต์ controls (Boolean Attribute) ใช้ในแท็ก <video> และ <audio> เพื่อแสดง UI ควบคุมการเล่นมาตรฐานของเบราว์เซอร์ (Play/Pause, Volume, Seek bar, Fullscreen, Playback rate, Captions, etc.) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <title>ตัวอย่าง HT

เหตุการณ์ onsearch จะถูกกระตุ้นเมื่อผู้ใช้พิมพ์ในช่องค้นหา (<input type=search>) และกด Enter หรือกดปุ่ม Clear (เครื่องหมาย X) หมายเหตุ: ไม่รองรับใน Internet Explorer และ Firefox ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <p>ค้นหาบางอย่างและกด Enter</p>

แอตทริบิวต์ content ใช้ร่วมกับแท็ก <meta> เพื่อระบุค่าที่เชื่อมโยงกับ http-equiv หรือ name เป็นข้อมูลเมตา (Metadata) ของหน้าเว็บ ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <meta name=description content=เนื้อหาการเรียนรู้และวิดีโอ> <meta name=keywords c

เหตุการณ์ onmouseout จะถูกกระตุ้นเมื่อเคอร์เซอร์เมาส์เคลื่อนออกจากขอบเขตขององค์ประกอบ HTML แตกต่างจาก onmouseleave ที่ไม่ทำงานเมื่อเมาส์เคลื่อนเข้า Child Elements ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h3 id=myid onmouseout=mouseOut() style=padding: 20px; backgrou

บทความนี้มีเนื้อหาเกี่ยวกับ ononline และ onoffline เหมือนกับ ID 1004064082 โปรดดูรายละเอียดครบถ้วนที่นั่น สรุป ononline: ทำงานเมื่อกลับมาออนไลน์ onoffline: ทำงานเมื่อขาดการเชื่อมต่อ ใช้ร่วมกับ navigator.onLine สำหรับตรวจสอบสถานะปัจจุบัน เหมาะสำหรับ PWA, Offline-first apps, Form autosave แนะนำใช้ a

เหตุการณ์ onmousemove จะถูกกระตุ้นซ้ำๆ ตลอดเวลาที่เคอร์เซอร์เมาส์เคลื่อนที่อยู่ภายในพื้นที่ขององค์ประกอบ HTML นี้ ใช้สำหรับติดตามตำแหน่งเมาส์แบบเรียลไทม์ ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h3 id=myid onmousemove=mouseMove() style=padding: 20px; background: #f0

เหตุการณ์ onoffline จะถูกกระตุ้นเมื่อเบราว์เซอร์สูญเสียการเชื่อมต่ออินเทอร์เน็ตและเข้าสู่โหมดออฟไลน์ ทำงานร่วมกับ ononline สำหรับตรวจสอบสถานะการเชื่อมต่อ ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body ononline=onlineFunc() onoffline=offlineFunc()> <script> functi

เหตุการณ์ onpagehide จะถูกกระตุ้นเมื่อผู้ใช้นำทางออกจากหน้าเว็บ กรณีที่พบได้ ได้แก่: คลิกลิงก์ไปหน้าอื่น ปิดแท็บ/หน้าต่างเบราว์เซอร์ ส่งฟอร์ม (Form Submit) กดปุ่ม Back/Forward Reload หน้า รูปแบบการใช้งาน <!-- ใน HTML Attribute --> <body onpagehide=myScript()> <!-- ใน JavaScript Pr

บทความนี้มีเนื้อหาเหมือนกับ ID 1004064079 ทั้งคู่อธิบายเหตุการณ์ onunload เมื่อปิดหน้าต่างเบราว์เซอร์ โปรดดูรายละเอียดที่บทความก่อนหน้า สรุปจุดสำคัญ onunload ทำงานเมื่อ: ปิดแท็บ/หน้าต่าง, นำทางหน้าใหม่, รีโหลด เบราว์เซอร์สมัยใหม่ บล็อก alert, confirm, redirect, async operations ใน onunload ใช้ nav

เหตุการณ์ onunload จะถูกกระตุ้นเมื่อหน้าเว็บกำลังจะถูกปลดโหลด (unload) จากหน้าต่าง/แท็บ เกิดขึ้นเมื่อ: ผู้ใช้ปิดแท็บ/หน้าต่าง นำทางไปหน้าอื่น รีโหลดหน้า เรียก window.close() ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body onunload=display()> <h2>Tutorialspoint</h2>

เหตุการณ์ onwheel ทำงานเมื่อลูกเลื่อนเมาส์ (mouse wheel) ถูกเลื่อนขึ้นหรือลงขณะที่เคอร์เซอร์อยู่เหนือองค์ประกอบ นี่คือเหตุการณ์มาตรฐานแทน onmousewheel (IE/Chrome เก่า) และ DOMMouseScroll (Firefox เก่า) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h3 id=myid onwheel=mous

เหตุการณ์ onvolumechange จะถูกกระตุ้นเมื่อผู้ใช้เปลี่ยนระดับเสียงของวิดีโอหรือเสียง เช่น เพิ่มเสียง, ลดเสียง, ปิดเสียง (mute) หรือเปิดเสียง (unmute) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h2 id=test>เล่น</h2> <video id=myid width=320 height=176 con

แท็ก <time> ใช้สำหรับแสดงวันที่และ/หรือเวลาในรูปแบบที่มนุษย์อ่านง่าย และเครื่องจักร (Search engines, Screen readers) สามารถแปรรูปได้ผ่านแอตทริบิวต์ datetime แอตทริบิวต์ datetime แอตทริบิวต์ รูปแบบ ตัวอย่าง datetime ISO 8601 2024-01-15, 14:30, 2024-01-15T14:30:00+07:00, PT2H30M (Duratio

แท็ก <dt> (Definition Term) ใช้ระบุ คำศัพท์ หรือ หัวข้อ ในรายการนิยาม (<dl> - Description List) คู่กับ <dd> (Definition Description) ที่เป็นคำอธิบาย โครงสร้างรายการนิยาม <dl> <dt>คำศัพท์ 1</dt> <dd>คำอธิบายของคำศัพท์ 1</dd> <dt>