In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > createEventObject (document)

createEventObject method (document)

Browser support:

Creates an event object for message sending.

After a new event object is created, it can be dispatched with the fireEvent method. The necessary properties of the newly created event object must be set before dispatching. Use an existing event object for the first parameter of the createEventObject method to copy its properties. The cancelBubble, returnValue, srcElement and type properties need not be set, the fireEvent method overrides these properties before dispatching.

In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the createEvent method to create a new event object.

Although Internet Explorer 9 supports the createEventObject method, but the createEvent method is cross-browser and it provides more complex functionality, so it is preferred to use.

Syntax:

object.createEventObject ([eventObjToClone]);

You can find the related objects in the Supported by objects section below.

Parameters:

eventObjToClone

Optional. Specifies an existing event object to clone.

Return value:

Returns the newly created event object.

Example HTML code 1:

This example illustrates the use of the createEvent and createEventObject methods:

<head>
    <script type="text/javascript">
        function InitMouseDown (event) {
                if (event.initMouseEvent) {     // all browsers except IE before version 9
                    var mousedownEvent = document.createEvent ("MouseEvent");
                    mousedownEvent.initMouseEvent ("mousedown", true, true, window, 0, 
                                                event.screenX, event.screenY, event.clientX, event.clientY, 
                                                event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 
                                                0, null);
                    event.target.dispatchEvent (mousedownEvent);
                } else {
                    if (document.createEventObject) {   // IE before version 9
                        var mousedownEvent = document.createEventObject (window.event);
                        mousedownEvent.button = 1;  // left button is down
                        event.srcElement.fireEvent ("onmousedown", mousedownEvent);
                    }
                }
        }
    </script>
</head>
<body>
    <button onmouseover="InitMouseDown (event);" onmousedown="alert ('mousedown event occurred')">
        Hover over this button!
    </button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the difference between the dispatchEvent and fireEvent methods. The dispatchEvent method invokes the default action of the event, the fireEvent method does not:

<head>
    <script type="text/javascript">
        function InitClick (event) {
                if (event.initMouseEvent) {     // all browsers except IE before version 9
                    var clickEvent = document.createEvent ("MouseEvent");
                    clickEvent.initMouseEvent ("click", true, true, window, 0, 
                                                event.screenX, event.screenY, event.clientX, event.clientY, 
                                                event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 
                                                0, null);
                    event.target.dispatchEvent (clickEvent);
                } else {
                    if (document.createEventObject) {   // IE before version 9
                        var clickEvent = document.createEventObject (window.event);
                        clickEvent.button = 1;  // left click
                        event.srcElement.fireEvent ("onclick", clickEvent);
                    }
                }
        }
    </script>
</head>
<body>
    <input type="checkbox" onmouseover="InitClick (event);" onclick="alert ('click event occurred')"/>Hover over the check box!
</body>