Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML DOM MouseEvent

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The MouseEvent Object handles events that occur when the mouse interacts with the HTML document. There are lots of events that interacts with the HTML document.

Mouse Events: Mouse events are the action taken by the user on the web page, like clicking, hovering over, etc.

Mouse Events Description
onmouseup Occurs when a user releases a mouse button over an element.
onmousedown Occurs when the button is pressed over an element.
onclick Occurs when the user clicks on an element.
oncontextmenu Occurs on right-clicking on an element
ondblclick Occurs on a double-click on an element.
onmouseenter Occurs when the pointer is moved onto an element.
onmouseleave Occurs when the pointer is moved out of an element.
onmousemove Occurs while the pointer moves over an element.
onmouseout Occurs when a user moves the mouse pointer out of an element, or out of one of its children.
onmouseover Occurs when the pointer moves over an element or its children.

MouseEvent Properties: These properties are used to inform the defined task if that happens.

Mouse Event Properties Description
altKey Define whether the alt key is pressed or not.
button Define the left or right-click events.
clientX Return the horizontal coordinate of the mouse pointer.
clientY Return the vertical coordinate of the mouse pointer.
layerX Return horizontal coordinate relative to the current layer.
layerY Return vertical coordinates relative to the current layer.
metaKey Indicates whether or not the “meta” key was pressed.
movementX Give the difference between the X coordinate of the mouse between two events.
movementY Give the difference between the Y coordinate of the mouse between two events.
mozInputSourc Give information about the type of device that generates the event.
offsetX Returning the x-coordinate of the mouse pointer.
offsetY Returning the y-coordinate of the mouse pointer.
pageX Returning the horizontal coordinate of the mouse pointer.
pageY Returning the vertical coordinate of the mouse pointer.
relatedTarget Returning the element that is related to the element that triggered the mouse event.
screenX Returning the horizontal coordinate of the mouse pointer.
screenY Returning the vertical coordinate of the mouse pointer.
shiftKey Define whether the shift key is pressed or not.
webkitForce Find pressure applied on the touchpad or touchscreen.
ctrlKey Define whether the ctrl key is pressed or not.

 

 

Example: Below program illustrates onmousedown and onmouseup properties.

html




<h1 style="color:green">GeeksforGeeks</h1>
<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
    The mouseDown() function works when the mouse button
    is pressed down over this paragraph and sets the color
    of the text to 'Yellow'. The mouseUp() function works 
    when the mouse button is released and sets the color
    of the text to 'Red'.
</p>
  
<script>
    function mouseDown() {
      
        // Using onmousedown property
        document.getElementById("myP").style.color = "yellow";
    }
      
    function mouseUp() {
      
        // Using onmouseup property
        document.getElementById("myP").style.color = "red";
    }
</script>


Output:

HTML DOM MouseEvent

HTML DOM MouseEvent

Supported Browsers:

  • Google Chrome 1
  • Mozilla Firefox 1
  • Internet Explorer 9
  • Edge 12
  • Opera 10.6
  • Safari 1

My Personal Notes arrow_drop_up
Last Updated : 02 Mar, 2023
Like Article
Save Article
Similar Reads
Related Tutorials