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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content