Mouse Events

The complete set of mouse-related events:

Name	Description
click	Triggered when the mouse button is clicked and released.
dblclick	Triggered when the mouse button is clicked and released twice.
mousedown	Triggered when the mouse button is clicked.
mouseenter	Triggered when the pointer is moved to be within the screen region occupied by the element or one of its descendants.
mouseleave	Triggered when the pointer is moved to be outside the screen region occupied by the element and all its descendants.
mousemove	Triggered when the pointer is moved while over the element.
mouseout	This is the same as for mouseleave, except that this event will trigger while the pointer is still over a descendant element.
mouseover	This is the same as for mouseenter, except that this event will trigger while the pointer is still over a descendant element.
mouseup	Triggered when the mouse button is released.

When a mouse event is triggered, the browser dispatches a MouseEvent object.

The MouseEvent Object

Name	Description	Returns
button	which button has been clicked; 0 is the main mouse button, 1 is the middle button, and 2 is the secondary/right button.	number
altKey	if the alt/option key was clicked.	boolean
clientX	Returns the X position of the mouse.	number
clientY	Returns the Y position of the mouse.	number
screenX	Returns the X position of the mouse, relative to the screen coordinate system.	number
screenY	Returns the Y position of the mouse, relative to the screen coordinate system.	number
shiftKey	Returns true if the Shift key was pressed.	boolean
ctrlKey	Returns true if the Ctrl key was pressed.	boolean

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
  background: gray;
  color: white;
  padding: 10px;
  margin: 5px;
  border: thin solid black
}

</style>
</head>
<body>
  <p id="block1">Move the mouse here.</p>
  <table>
    <tr>
      <th>Type:</th>
      <td id="eType"></td>
    </tr>
    <tr>
      <th>X:</th>
      <td id="eX"></td>
    </tr>
    <tr>
      <th>Y:</th>
      <td id="eY"></td>
    </tr>
  </table>
  <script type="text/javascript">
    var textblock = document.getElementById("block1");
    var typeCell = document.getElementById("eType");
    var xCell = document.getElementById("eX");
    var yCell = document.getElementById("eY");
    textblock.addEventListener("mouseover", handleMouseEvent, false);
    textblock.addEventListener("mouseout", handleMouseEvent, false);
    textblock.addEventListener("mousemove", handleMouseEvent, false);
    function handleMouseEvent(e) {
      if (e.eventPhase == Event.AT_TARGET) {
        typeCell.innerHTML = e.type;
        xCell.innerHTML = e.clientX;
        yCell.innerHTML = e.clientY;
        if (e.type == "mouseover") {
          e.target.style.background = 'black';
          e.target.style.color = 'white';
        } else {
          e.target.style.removeProperty('color');
          e.target.style.removeProperty('background');
        }
      }
    }
  </script>
</body>
</html>

Click to view the demo

Home
JavaScript Book
DOM