HTML | DOM createEvent() Event Method

Last Updated : 24 Jul, 2019

The createEvent() method in HTML creates an event object of the specified type. The created event must be initialized before use.

Syntax:

document.createEvent( event_type )

event_type: It is the required parameter and used to specify the type of event.

There are many type of events which are listed below:

AnimationEvent
ClipboardEvent
DragEvent
FocusEvent
HashChangeEvent
InputEvent
KeyboardEvent
MouseEvent

PageTransitionEvent
PopStateEvent
ProgressEvent
StorageEvent
TouchEvent
TransitionEvent
UiEvent
WheelEvent

Below program illustrates the createEvent() method in HTML:

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM createEvent() Event Method
        </title>
          
        <style>
            div {
                padding:50px;
                text-align:center;
                background-color: green;
                color: white;
            }
        </style>
    </head>
      
    <body>
        <script>
            document.body.onclick = function() {
                document.getElementById("Geeks").innerHTML 
                            = "Welcome to GeeksforGeeks!";
            };
              
            var onClick = function() {
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent
                    ("click", true, true, window, 0, 0, 0, 0,
                    0, false, false, false, false, 0, null);
                document.body.dispatchEvent(evt);
            }
              
            onClick();
        </script>
          
        <div id = "Geeks"></div>
      
    </body>
</html>                    

Output:
Before Click on the element:

After Click on the element:

Supported Browsers: The browser supported by DOM createEvent() method are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Related Articles