Open In App

HTML DOM createEvent() Event Method

Last Updated : 09 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 is used to specify the type of event. There are many types of events which are listed below:

 
 

Example: Below program illustrates the createEvent() method in HTML.

HTML




<!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!";
        };
        let onClick = function () {
            let 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: 

 

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

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Firefox 1
  • Opera 7
  • Safari 1


Previous Article
Next Article

Similar Reads

HTML DOM stopPropagation() Event Method
The stopPropagation() method is used to stop the propagation of event calling. That is a parent event is called we can stop the propagation of calling its children by using the stopPropagation() method and vice-versa. Syntax: event.stopPropagation() Return Value: It does not return any value. Example: In this example when the checkbox is not checke
2 min read
What is the use of the Event.preventDefault() method in Event Handling in JavaScript ?
The Event.preventDefault() method in JavaScript is used within event handlers to prevent the default behavior associated with an event from taking place. When an event occurs, such as a click on a link or the submission of a form, there is often a default action associated with that event. preventDefault() allows developers to stop this default beh
1 min read
HTML DOM fullscreenerror Event
The HTML DOM fullscreenerror event occurs when an element can not be viewed in full-screen mode, even if it has been requested. Use the element.requestFullscreen() method to view an element in fullscreen mode and the element.exitFullscreen() method to cancel fullscreen mode. Supported Tags It supports all HTML elements. Syntax: In HTML: &lt;element
1 min read
HTML | DOM onvolumechange Event
The onvolumechange event in HTML DOM occurs when the media volume is changed. Use volume property to set/return the volume of the media.This event is invoked by: Volume increasing/decreasingMuting/unmuting the media player Supported Tags &lt;audio&gt;&lt;video&gt; Syntax: In HTML: &lt;element onvolumechange="myScript"&gt;In JavaScript: object.onvol
1 min read
HTML DOM onopen Event
The DOM onopen event occurs on an open connection with an event source. Related events: onmessage: Received the message.onerror: The problem occurs. Syntax: Using JavaScript:object.onopen = function(){myScript};Using the addEventListener() method:object.addEventListener("open", myScript); Example: Using the addEventListener() method C/C++ Code &lt;
1 min read
HTML DOM ondragleave Event
The ondragleave event occurs when a draggable element or text selection leaves a valid drop target. The ondragenter and ondragleave events can help the user to understand dropzone.There are some events that are used and occurred in the different stages of a drag and drop operation: ondragstart: occurs when dragging of an element started.ondrag: occ
3 min read
HTML DOM onpaste Event
The HTML DOM onpaste event occurs when some content is pasted in an element. this event works on every element like in &lt;p&gt; element if contenteditable set is true then we can paste content in &lt;p&gt; element. The HTML DOM onpaste event is mostly used in input element type="text". Supported Tags: It supports all HTML Elements. Syntax: In HTML
1 min read
HTML | DOM touchcancel Event
The touchcancel event is used to execute a script when the touch event gets interrupted. It is considered a good practice to include the touchcancel event to clean up the code if the devices interrupt a touch event at different actions.Supported Tags All HTML elements supported by this event. Supported Tags &lt;details&gt; Syntax: object.ontouchcan
1 min read
HTML | DOM touchmove Event
The touchmove event is used to execute a script when the user moves the finger across the screen. It works only on touch screen devices and triggers once for every movement and continues to trigger until the finger is released.Supported Tags All HTML elements supported by this event. Syntax: object.ontouchmove = myScript; Below program illustrates
1 min read
HTML | DOM Storage Event
The Storage Event in HTML DOM is used to make change in the storage area in the context of another document. When there is modification in the storage area of the window, a storage event is sent to that window. Syntax: window.addEventListener("storage", script) Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;
1 min read
Article Tags :