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

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

createEvent method (document, XMLDocument)

Browser support:

9

Creates an event object with the specified type.

After a new event object is created, initialize it first (see the eventType parameter). When the event is initialized, it can be dispatched with the dispatchEvent method.

In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.

Syntax:

object.createEvent (eventType);

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

Parameters:

eventType

Required. String that specifies the type of the event to be created.

One of the following values:

CompositionEvent

Creates an event object that implements the CompositionEvent interface. Use the initCompositionEvent method for initialization.

CustomEvent

Creates an event object that implements the CustomEvent interface. Use the initCustomEvent method for initialization.

DragEvent

Creates an event object that implements the DragEvent interface. Use the initDragEvent method for initialization.

Event

Creates an event object that implements the Event interface. Use the initEvent method for initialization.

Events

Same as the Event type.

FocusEvent

Creates an event object that implements the FocusEvent interface. Use the initFocusEvent method for initialization.

HTMLEvents

Same as the Event type.

KeyboardEvent

Creates an event object that implements the KeyboardEvent interface. Use the initKeyEvent method for initialization.

KeyEvents

Same as the KeyboardEvent type.

MessageEvent

	3	10.6

Creates an event object that implements the MessageEvent interface. Use the initMessageEvent method for initialization.

MouseEvent

Creates an event object that implements the MouseEvent interface. Use the initMouseEvent method for initialization.

MouseEvents

Same as the MouseEvent type.

MouseScrollEvents

In Firefox before version 3.5, it is same as the MouseEvent type. In Firefox from version 3.5, it creates an event object that implements the MouseScrollEvent interface. Use the initMouseScrollEvent method for initialization.

MouseWheelEvent

Creates an event object that implements the MouseWheelEvent interface. Use the initMouseWheelEvent method for initialization.

MutationEvent

Creates an event object that implements the MutationEvent interface. Use the initMutationEvent method for initialization.

MutationEvents

Same as the MutationEvent type.

OverflowEvent

Creates an event object that implements the OverflowEvent interface. Use the initOverflowEvent method for initialization.

PopupBlockedEvents

Creates an event object that implements the PopupBlockedEvent interface. Use the initPopupBlockedEvent method for initialization.

PopupEvents

Same as the MouseEvent type.

ProgressEvent

	3.5	10.5

Creates an event object that implements the ProgressEvent interface. Use the initProgressEvent method for initialization.

StorageEvent

		10.5

Creates an event object that implements the StorageEvent interface. Use the initStorageEvent method for initialization.

SVGEvent

Creates an event object that implements the SVGEvent interface. Use the initEvent method for initialization.

SVGEvents

Same as the SVGEvent type.

SVGZoomEvent

Creates an event object that implements the SVGZoomEvent interface. Use the initUIEvent method for initialization.

SVGZoomEvents

Same as the SVGZoomEvent type.

TextEvent

Creates an event object that implements the TextEvent interface. Use the initTextEvent method for initialization in Google Chrome and Safari. In Firefox, this is the same as the UIEvent type.

TextEvents

Same as the UIEvent type.

UIEvent

Creates an event object that implements the UIEvent interface. Use the initUIEvent method for initialization.

UIEvents

Same as the UIEvents type.

WheelEvent

Creates an event object that implements the WheelEvent interface. Use the initUIEvent method for initialization.

XULCommandEvent

Creates an event object that implements the XULCommandEvent interface. Use the initCommandEvent method for initialization.

XULCommandEvents

Same as the XULCommandEvent type.

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>