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

You are here: Reference > JavaScript > client-side > event handling > methods > dispatchEvent

dispatchEvent method

Browser support:

9

Dispatches the specified event to the current element.

To create an event object use the createEvent method in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9. After the new event is created, initialize it first (for details, see the page for the createEvent method). When the event is initialized, it is ready for dispatching.

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

Note: the main difference between the dispatchEvent and fireEvent methods is that the dispatchEvent method invokes the default action of the event, the fireEvent method does not. See Example 2 for details.

If you need to simulate a mouse click on an element, use the click method.
To set or remove the focus from an element, use the focus and blur methods.

Syntax:

object.dispatchEvent (eventObj);

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

Parameters:

eventObj

Required. Reference to an event object to be dispatched.

Return value:

Boolean that indicates whether the default action of the event was not canceled.

The default action can be canceled with the preventDefault method and the returnValue property. When an event handler returns false, it also cancels the default action. The getPreventDefault method can also be used to retrieve whether an event was canceled or not.

One of the following values:

false	The event was canceled.
true	The event was not canceled.

Example HTML code 1:

This example illustrates the use of the dispatchEvent and fireEvent 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>