เมธอด HTML DOM createEvent()

เมธอด HTML DOM createEvent() ใช้สำหรับสร้างอ็อบเจกต์เหตุการณ์ซึ่งประเภทจะถูกระบุในพารามิเตอร์ เหตุการณ์ที่สร้างต้องถูกเริ่มต้น (initialized) ก่อนใช้งาน เพื่อส่งเหตุการณ์ไปยังองค์ประกอบ HTML คุณต้องใช้เมธอด dispatchEvent() บนโหนดที่ระบุ

ไวยากรณ์

ไวยากรณ์สำหรับเมธอด HTML DOM createEvent() ดังนี้ -

document.createEvent(eventType)

ที่นี่ eventType เป็นประเภท string และเป็นพารามิเตอร์ที่จำเป็น ประเภทของเหตุการณ์มีดังนี้: AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WheelEvent

ตัวอย่าง

ลองดูตัวอย่างสำหรับเมธอด createEvent() -

<!DOCTYPE html> <html> <body> <style> p{ border:solid 1px blue; background-color:lightgreen; } </style> <h2>createEvent() example</h2> <script> var i = 0; function eventAdd() { var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseout", true, true); document.getElementById("PAR1").dispatchEvent(x); } function addText(){ var txt = document.getElementById("PAR1"); txt.innerHTML += " TEXT" + i; i++; } </script> <p onmouseout="addText()" id="PAR1">This is a sample paragraph</p> <button onclick="eventAdd()">Simulate Mouse Out</button> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อคลิก "Simulate Mouse Out" หรือเมาส์ออกจากย่อหน้าปัจจุบัน คือนำเมาส์จากในไปนอกองค์ประกอบ <p> หลายครั้ง -

ในตัวอย่างข้างต้น -

เราสร้างย่อหน้าพร้อมสไตล์บางส่วนและเมื่อเมาส์ออกจากองค์ประกอบนั้นจะเรียกใช้เมธอด addText() -

p{ border:solid 1px blue; background-color:lightgreen; } <p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>

เราสร้างปุ่ม "Simulate mouse out" ที่เรียกใช้เมธอด eventAdd() เมื่อถูกคลิกโดยผู้ใช้ -

<button onclick="eventAdd()">Simulate Mouse Out</button>

เมธอด addText() ดึงองค์ประกอบย่อหน้าโดยใช้เมธอด getElementById() ของอ็อบเจกต์เอกสาร มันจึงผนวก "TEXT" + ตัวแปร i ไปด้วยคุณสมบัติ innerHTML -

function addText(){ var txt = document.getElementById("PAR1"); txt.innerHTML += " TEXT" + i; i++; }

เมธอด eventAdd() สร้างเหตุการณ์ประเภท "MouseEvent" โดยใช้เมธอด createEvent() ของอ็อบเจกต์เอกสาร มันจึงเริ่มต้นเหตุการณ์เมาส์ด้วยพารามิเตอร์ ชื่อเหตุการณ์="mouseout" bubbling=true และ cancellable=true

เราจึงส่ง "MouseEvent" ที่เราสร้างไปยังองค์ประกอบ <p> โดยใช้เมธอด dispatchEvent() บนโหนดย่อหน้า องค์ประกอบ <p> จะทำหน้าที่เป็น event listener -

function eventAdd() { var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseout", true, true); document.getElementById("PAR1").dispatchEvent(x); }