HTML - DOM Document createEvent() Method

Quiz

HTML DOM document createEvent() method is used for creating an event object whose event type is specified in the parameter. The event created must be initialized before using it.

Syntax

document.createEvent(type);

Parameter

It accepts one parameter which is mentioned below.

Parameter	Description
type	It is a required parameter. It represents represent various event types. AnimationEvent ClipboardEvent DragEvent FocusEvent HashChangeEvent InputEvent KeyboardEvent MouseEvent PageTransitionEvent PopStateEvent ProgressEvent StorageEvent TouchEvent TransitionEvent UiEvent WheelEvent

Return Value

It returns the created event object.

Examples of HTML DOM Document 'createEvent()' Method

The following examples illustrates implementation of createEvent method.

Creating MouseOut and Click Event

In the following examples two type of events are illustrated - click and mouseout. Click event keeps count of mouse clicks and mouseout event keeps count of number of time mouse was moved out of the green area.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document createEvent() Method</title>
    <style>
        p {
            background-color: green;
            height: 100px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>HTML DOM document createEvent() Method</h3>
    <p onmouseout="textFun()" id="txt">Simulate Mouse Out</p>
    <button onclick="eventFun()">Click me</button>
    <script>
        let i = 0;
        function eventFun() {
            let x = document.createEvent("MouseEvent");
            x.initMouseEvent("mouseout", true, true);
            document.getElementById("txt").dispatchEvent(x);
        }
        function textFun() {
            let txt = document.getElementById("txt");
            txt.innerHTML += "TEXT" + i;
            i++;
        }
    </script>
</body>
</html>

Creating mouseover Event

In the following examples mouseover event is created which keeps count of number of time mouse was moved in to the green area.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document createEvent() Method</title>
    <style>
        p {
            background-color: green;
            height: 100px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>HTML DOM document createEvent() Method</h3>
    <p onmouseover="textFun()" id="txt">Simulate Mouse Over</p>
    <button onclick="eventFun()">Click me</button>
    <script>
        let i = 0;
        function eventFun() {
            let x = document.createEvent("MouseEvent");
            x.initMouseEvent("mouseover", true, true);
            document.getElementById("txt").dispatchEvent(x);
        }
        function textFun() {
            let txt = document.getElementById("txt");
            txt.innerHTML += "TEXT" + i;
            i++;
        }
    </script>
</body>
</html>

Supported Browsers

Method
createEvent()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

Print Page