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

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

initMouseEvent method (event)

Browser support:

9

Initializes an event object created by the createEvent method with type of 'MouseEvent'.

An event object created by the createEvent method with type of 'MouseEvent' implements the MouseEvent interface.
After initialization, the event 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.initMouseEvent (eventName, bubbles, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

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

Parameters:

eventName

Required. String that specifies the name (type) of the event to initialize.

This parameter is case sensitive! Sets the type property of the event object. For a complete list of events, see the page for Events in JavaScript. The initMouseEvent method is appropriate for initialization of MouseEvent types principally, for other events, use the type-specific initialization methods.

Note: custom event names are also allowed.
Events represented by the MouseEvent interface:

click

contextmenu

		10.5

dblclick

DOMMouseScroll

drag

	3

dragdrop


	3.5

dragend

	3

dragenter

dragexit

draggesture

dragleave

dragover

dragstart

drop

mousedown

mousemove

mouseout

mouseover

mouseup

mousewheel

bubbles

Required. Boolean that specifies whether the event can bubble or not. Sets the bubbles property of the event object.

One of the following values:

false

The event cannot bubble up.

true

The event can bubble up.

cancelable

Required. Boolean that specifies whether the event can be canceled or not. Sets the cancelable property of the event object.

One of the following values:

false

The event cannot be canceled.

true

The event can be canceled.

view

Required. Reference to the window object in which the event is supposed to have occurred. Sets the view property of the event object.

detail

Required. Integer that specifies additional information about the event. For mouse click events specifies the number of clicks, for mouse scroll events specifies the distance that the mouse wheel rolled. Sets the detail property of the event object.

screenX

Required. Integer that specifies the x-coordinate of the mouse pointer relative to the top-left corner of the screen. Sets the screenX property of the event object.

screenY

Required. Integer that specifies the y-coordinate of the mouse pointer relative to the top-left corner of the screen. Sets the screenY property of the event object.

clientX

Required. Integer that specifies the x-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area. Sets the clientX property of the event object.

clientY

Required. Integer that specifies the x-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area. Sets the clientY property of the event object.

ctrlKey

Required. Boolean that indicates the Control key state. Sets the ctrlKey property of the event object.

One of the following values:

false

The Control key is not pressed.

true

The Control key is pressed.

altKey

Required. Boolean that indicates the Alt key state. Sets the altKey property of the event object.

One of the following values:

false

The Alt key is not pressed.

true

The Alt key is pressed.

shiftKey

Required. Boolean that indicates the Shift key state. Sets the shiftKey property of the event object.

One of the following values:

false

The Shift key is not pressed.

true

The Shift key is pressed.

metaKey

Required. Boolean that indicates the Meta key state. Sets the metaKey property of the event object.

One of the following values:

false

The Meta key is not pressed.

true

The Meta key is pressed.

button

Required. Integer that specifies which mouse button caused the event. Sets the button property of the event object.

relatedTarget

Required. Reference to the related element to the mouse event. Sets the relatedTarget property of the event object.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the initMouseEvent method for the onmousedown event:

<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 use of the initMouseEvent method for the onclick event and 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>