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

createEventObject method (document)

A A

Font size

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 and Safari, use the createEvent method to create a new event object.

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>
        function InitMouseDown (event) {
                if (event.initMouseEvent) {        // Firefox, Safari, Opera
                    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) {        //Internet Explorer
                        var mousedownEvent = document.createEventObject (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>
        function InitClick (event) {
                if (event.initMouseEvent) {        // Firefox, Safari, Opera
                    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) {        //Internet Explorer
                        var clickEvent = document.createEventObject (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>