Mouse
mouse event
Mouse event attributes in HTML are used to trigger specific actions when the user interacts with an element using the mouse. Examples include onclick, onmouseover, and onmouseout.
Mouse Events in HTML
These are common mouse events that can be used to trigger actions when a user interacts with an element using a mouse.
| Event | Occurs When |
|---|---|
onclick | Fired when a user clicks on an element (left-click). |
oncontextmenu | Fired when a user right-clicks on an element, usually triggering a context menu. |
ondblclick | Fired when a user double-clicks on an element. |
onmousedown | Fired when a mouse button is pressed down over an element. |
onmouseenter | Fired when the mouse pointer enters an element (without needing to move over child elements). |
onmouseleave | Fired when the mouse pointer leaves an element (without moving over child elements). |
onmousemove | Fired when the mouse pointer moves over an element. |
onmouseout | Fired when the mouse pointer leaves an element or one of its child elements. |
onmouseover | Fired when the mouse pointer moves onto an element or one of its child elements. |
onmouseup | Fired when a mouse button is released over an element. |
These events can be handled with JavaScript to perform actions like opening menus, changing styles, or triggering animations based on user interactions.
Mouse Event Properties
These properties are available when handling mouse events in HTML and JavaScript. They provide information about the mouse interaction and the environment in which the event occurred.
| Property | Returns |
|---|---|
altKey | true if the ALT key is pressed during the event. |
button | Which mouse button was pressed (0 = left, 1 = middle, 2 = right). |
buttons | A bitmask representing which mouse buttons are currently pressed. |
clientX | The X coordinate of the mouse pointer relative to the window. |
clientY | The Y coordinate of the mouse pointer relative to the window. |
ctrlKey | true if the CTRL key is pressed during the event. |
detail | The number of times the mouse button was pressed during the event (useful for dblclick). |
metaKey | true if the META (Command) key is pressed during the event. |
offsetX | The X coordinate of the mouse pointer relative to the target element. |
offsetY | The Y coordinate of the mouse pointer relative to the target element. |
pageX | The X coordinate of the mouse pointer relative to the document. |
pageY | The Y coordinate of the mouse pointer relative to the document. |
relatedTarget | The element that triggered the mouse event (e.g., for mouseover/mouseout). |
screenX | The X coordinate of the mouse pointer relative to the screen. |
screenY | The Y coordinate of the mouse pointer relative to the screen. |
shiftKey | true if the SHIFT key is pressed during the event. |
Conclusion
HTML mouse event attributes provide interactive capabilities based on mouse actions like clicks, movement, and button presses. These events, such as onclick, onmouseover, and onmouseout, can be used with JavaScript to trigger dynamic behaviors, enhancing user interactions. The mouse event properties offer valuable details, such as the mouse position and key modifiers, for precise handling of events.