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);
}
raja
Published on 08-Aug-2019 16:53:41
Advertisements