เมธอด HTML DOM createEvent() ใช้สำหรับสร้างอ็อบเจกต์เหตุการณ์ซึ่งประเภทจะถูกระบุในพารามิเตอร์ เหตุการณ์ที่สร้างขึ้นจะต้องเริ่มต้นก่อนใช้งาน ในการส่งเหตุการณ์ไปยังองค์ประกอบ HTML คุณต้องใช้เมธอด dispatchEvent() บนโหนดที่ระบุ
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบ HTML DOM createEvent() -
document.createEvent( eventType )
ที่นี่ eventType ของประเภทสตริงประเภทเป็นพารามิเตอร์ที่จำเป็น ประเภทของเหตุการณ์แสดงเป็น: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>
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิก "จำลองเมาส์ออก" หรือเลื่อนเมาส์ออกจากย่อหน้าปัจจุบัน เช่น นำเมาส์จากภายในสู่ภายนอก
องค์ประกอบสองสามครั้ง -
ในตัวอย่างข้างต้น −
เราได้สร้างย่อหน้าโดยใช้รูปแบบบางอย่าง และเมื่อเมาส์ออกจากองค์ประกอบนั้น มันจะเรียกใช้งานเมธอด addText()
p{
border:solid 1px blue;
background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p> เราได้สร้างปุ่ม “จำลองการเอาเมาส์ออก” ที่รันเมธอด eventAdd() เมื่อผู้ใช้คลิก
<button onclick="eventAdd()">Simulate Mouse Out</button>
เมธอด addText() รับองค์ประกอบย่อหน้าโดยใช้เมธอด getElementById() ของอ็อบเจ็กต์เอกสาร จากนั้นต่อท้าย "ข้อความ" + ตัวแปร i โดยใช้คุณสมบัติ innerHTML -
function addText(){
var txt=document.getElementById("PAR1");
txt.innerHTML+=" TEXT"+i;
i++;
} เมธอด eventAdd() สร้างเหตุการณ์ประเภท “MouseEvent” โดยใช้เมธอด createEvent() ของอ็อบเจ็กต์เอกสาร จากนั้นจะเริ่มต้นเหตุการณ์ของเมาส์ด้วยพารามิเตอร์ event name=”mouseout” bubbling=true and cancellable=true
จากนั้นเราจะส่ง “MouseEvent” ที่เราสร้างขึ้นไปยังองค์ประกอบ
โดยใช้เมธอด dispatchEvent() บนโหนดย่อหน้า
องค์ประกอบจะทำหน้าที่เป็นตัวฟังเหตุการณ์ -
function eventAdd() {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseout", true, true);
document.getElementById("PAR1").dispatchEvent(x);
} 