Posted By
Bajarangi soft ,
Posted On 29-09-2020
createEvent() method creates an event object.The event can be of any legal event type, and must be initialized before use.
Syntax and Usage
document.createEvent(type)
Parameter Values
type Required. A String that specifies the type of the event.
Possible values:
AnimationEvent
ClipboardEvent
DragEvent
FocusEvent
HashChangeEvent
InputEvent
KeyboardEvent
MouseEvent
PageTransitionEvent
PopStateEvent
ProgressEvent
StorageEvent
TouchEvent
TransitionEvent
UiEvent
WheelEvent
<div class="demo1" onmouseover="this.innerHTML += '*';" id="demo1">*</div>
<button class="btn btn-primary" onclick="demo1_function(event)">Simulate Mouse Over for *</button>
<script>
function demo1_function(event) {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("demo1").dispatchEvent(x);
}
<script>
In above example when mouse over on div automatically * star prints inside that specified div
Example(2)
<div class="demo2" onmouseover="this.innerHTML += ' Hello world ';" id="demo2">Hello world</div>
<button class="btn btn-primary" onclick="demo2_function(event)">Simulate Mouse Over for #</button>
<script>
function demo2_function(event) {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("demo2").dispatchEvent(x);
}
<script>
In above example we can also print words .when mouse over on div automatically "hello worlds" prints inside that specified div
Complete code for mouse over event in java script
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM CreateEvent Method In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
.demo1 {
padding:50px;
background-color: green;
color: white;
}
.demo2 {
padding:50px;
background-color: darkolivegreen;
color: white;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>HTML DOM CreateEvent Method In JavaScript</h1>
</div>
<br>
<div class="well">
<div class="demo1" onmouseover="this.innerHTML += '*';" id="demo1">*</div>
<br>
<div class="demo2" onmouseover="this.innerHTML += ' Hello world ';" id="demo2">Hello world</div>
<br>
<button class="btn btn-primary" onclick="demo1_function(event)">Simulate Mouse Over for *</button>
<button class="btn btn-primary" onclick="demo2_function(event)">Simulate Mouse Over for #</button>
</div>
<br>
</div>
</body>
</html>
<script>
function demo1_function(event) {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("demo1").dispatchEvent(x);
}
function demo2_function(event) {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("demo2").dispatchEvent(x);
}
</script>