- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM createEvent() method
The HTML DOM createEvent() method is used for creating an event object whose type will be specified in the parameter. The event created must be initialized before using it. To dispatch the event to an HTML element you have to use the dispatchEvent() method on that specified node.
Syntax
Following is the syntax for the HTML DOM createEvent() method −
document.createEvent( eventType )
Here, the eventType of type string type is a required parameter. The type of events are listed as: AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WheelEvent.
Example
Let us look at an example for the createEvent() method −
<!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>Output
This will produce the following output −
On clicking the “Simulate Mouse Out” or mouse out of the current paragraph i.e bringing the mouse from inside to outside of <p> element a few times −
In the above example −
We have created a paragraph with some styling applied to it and when the mouse gets out of that element it executes the addText() method.
p{
border:solid 1px blue;
background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>We have then created a button “Simulate mouse out” that executes the eventAdd() method upon being clicked by the user.
<button onclick="eventAdd()">Simulate Mouse Out</button>
The addText() method gets the paragraph element using the getElementById() method of the document object. It then appends the “Text” + variable i to it using its innerHTML property −
function addText(){
var txt=document.getElementById("PAR1");
txt.innerHTML+=" TEXT"+i;
i++;
}The eventAdd() method creates an event of type “MouseEvent” using the createEvent() method of the document object. It then initializes the mouse event with the parameters, event name=”mouseout” bubbling=true and cancellable=true.
We then dispatch the “MouseEvent” that we created to the <p> element using the dispatchEvent() method on the paragraph node. The <p> element will now act as an event listener −
function eventAdd() {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseout", true, true);
document.getElementById("PAR1").dispatchEvent(x);
}
199 Views
