Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 142

Event Description

Raised when the mouse performs a double-click dblclick

Raised when the mouse button is pressed down mousedown

Raised when the mouse button is released mouseup

mouseenter or
mouseover

Raised when the mouse cursor enters the space of an HTML element

Raised when the mouse cursor leaves the space of an HTML element

mouseleave

Raised when the mouse cursor moves over an HTML element

mousemove

The mouse events provide additional information on the event object. Table 2-6 lists the
applicable properties of the event object.

TABLE 2-6 Properties of the mouse event

Property Description

The x or horizontal position of the mouse cursor relative to the viewport boundaries

clientX

The y or vertical position of the mouse cursor relative to the viewport boundaries clientY

The x or horizontal position of the mouse cursor relative to the target element

offsetX

The y or vertical position of the mouse cursor relative to the target element offsetY

The x or horizontal position of the mouse cursor relative to the upper-left corner of the
screen

screenX

The y or vertical position of the mouse cursor relative to the upper-left corner of the screen screenY

The following code demonstrates capturing each coordinate set:

window.onload = function () {
document.getElementById("yellowBox").addEventListener("click", yellowBoxClick);
}
function yellowBoxClick() {
document.write("Client X: " + window.event.clientX + " ClientY: "
+ window.event.clientY);
document.write("<BR />");
document.write("offsetX: " + window.event.offsetX + " offsetY: "
+ window.event.offsetY);
document.write("<BR />");
document.write("screen X: " + window.event.screenX + " screenY: "
+ window.event.screenY);
}

This code assumes a div called yellowBox that raises its click event when the mouse clicks it.
You can easily change the event to mousedown or mouseup to achieve the same outcome.
The mouseenter and mouseleave events indicate when the mouse cursor position has
entered or left the area covered by a particular element, respectively. The following code