Mouse Events

A mouse event is triggered in response to some mouse action that occurs on an element, like pushing the left mouse button. In order to respond to a mouse event, a handler function must be set to be called when the event occurs. In the code below, I have created 5 elements to handle 5 types of events: Mouse Move, Mouse Over/Out, Mouse Down/Up, Mouse Clicks, and Focus/Blur. Each of the 5 elements is a simple div that I have styled. Then I set the events that each element will respond to and attach an anonymous function to handle the event. Each of the handler functions sets the inner text (i.e. the innerHTML).

Mouse Move
Mouse move events are captured by the yellow element inside the output box below. A mouse move event is triggered whenever the pointer moves over the element. Move the pointer over the yellow element, and you will see the text and coordinates update.
Mouse Over/Out
Mouse over and mouse out events are captured by the cyan element inside the output box below. A mouse over event is triggered once when the pointer moves into the element. A mouse out event is triggered once when the pointer moves out of the element. Move the pointer in and out of the the cyan element, and you will see the text and coordinates update.
Mouse Down/Up
Mouse up and mouse down events are captured by the red element inside the output box below. A mouse down event is triggered once when a mouse button is pressed and the pointer is over the element. A mouse up event is triggered once when a mouse button is released and the pointer is over the element. Note that these events are generated for any mouse button or even the mouse wheel. Move the pointer over the red element and click or release any mouse button, and you will see the text and coordinates update.
Mouse Clicks
Mouse click events are captured by the green element inside the output box below. Mouse click events have three variants: left-click, double-click, and right-click. A mouse click event is triggered whenever the pointer is over the element and one of these clicks is performed. Note that a click consists of a press and release and is triggered after the mouse up event. Move the pointer over the green element and try the three clicks, and you will see the text and coordinates update.
Focus/Blur
Focus and blur events are captured by the blue element inside the output box below. A focus event is triggered whenever a click occurs inside an element that does not have focus. A blur event is triggered whenever a click occurs outside an element that has focus. Click inside and outside the blue element, and you will see the text update.

MouseEvents.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="MouseEvents.js"></script>
</body>
</html>

MouseEvents.js

var qBody = document.getElementsByTagName("body")[0];

// Mouse Move Events
var qMouseMoveEventDiv = document.createElement("div");
qMouseMoveEventDiv.style.backgroundColor = "#ffff88";
qMouseMoveEventDiv.style.width = "400px";
qMouseMoveEventDiv.style.height = "100px";
qMouseMoveEventDiv.style.margin = "5px";
qMouseMoveEventDiv.style.color = "#404040";
qMouseMoveEventDiv.innerHTML = "No Event Yet";
qMouseMoveEventDiv.onmousemove = function(e) {
  qMouseMoveEventDiv.innerHTML = "Mouse Move<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qBody.appendChild(qMouseMoveEventDiv);

// Mouse Over and Out Events
var qMouseOverOutEventDiv = document.createElement("div");
qMouseOverOutEventDiv.style.backgroundColor = "#88ffff";
qMouseOverOutEventDiv.style.width = "400px";
qMouseOverOutEventDiv.style.height = "100px";
qMouseOverOutEventDiv.style.margin = "5px";
qMouseOverOutEventDiv.style.color = "#404040";
qMouseOverOutEventDiv.innerHTML = "No Event Yet";
qMouseOverOutEventDiv.onmouseout = function(e) {
  qMouseOverOutEventDiv.innerHTML = "Mouse Out<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qMouseOverOutEventDiv.onmouseover = function(e) {
  qMouseOverOutEventDiv.innerHTML = "Mouse Over<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qBody.appendChild(qMouseOverOutEventDiv);

// Mouse Down and Up Events
var qMouseDownUpEventDiv = document.createElement("div");
qMouseDownUpEventDiv.style.backgroundColor = "#ff8888";
qMouseDownUpEventDiv.style.width = "400px";
qMouseDownUpEventDiv.style.height = "100px";
qMouseDownUpEventDiv.style.margin = "5px";
qMouseDownUpEventDiv.style.color = "#404040";
qMouseDownUpEventDiv.innerHTML = "No Event Yet";
qMouseDownUpEventDiv.onmousedown = function(e) {
  qMouseDownUpEventDiv.innerHTML = "Mouse Down<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qMouseDownUpEventDiv.onmouseup = function(e) {
  qMouseDownUpEventDiv.innerHTML = "Mouse Up<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qBody.appendChild(qMouseDownUpEventDiv);

// Mouse Click Events
var qMouseClickEventDiv = document.createElement("div");
qMouseClickEventDiv.style.backgroundColor = "#88ff88";
qMouseClickEventDiv.style.width = "400px";
qMouseClickEventDiv.style.height = "100px";
qMouseClickEventDiv.style.margin = "5px";
qMouseClickEventDiv.style.color = "#404040";
qMouseClickEventDiv.innerHTML = "No Event Yet";
qMouseClickEventDiv.onclick = function(e) {
  qMouseClickEventDiv.innerHTML = "Left Click<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qMouseClickEventDiv.ondblclick = function(e) {
  qMouseClickEventDiv.innerHTML = "Double Click<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qMouseClickEventDiv.oncontextmenu = function(e) {
  qMouseClickEventDiv.innerHTML = "Right Click<br /> Page = (" +
    e.pageX + ", " + e.pageY + ")<br />" +
    " Client = (" + e.clientX + ", " + e.clientY + ")";
};
qBody.appendChild(qMouseClickEventDiv);

// Focus and Blur Events
var qFocusEventTextArea = document.createElement("textarea");
qFocusEventTextArea.style.backgroundColor = "#8888ff";
qFocusEventTextArea.style.width = "394px";
qFocusEventTextArea.style.height = "100px";
qFocusEventTextArea.style.maxHeight = "100px";
qFocusEventTextArea.style.maxWidth = "394px";
qFocusEventTextArea.style.margin = "5px";
qFocusEventTextArea.style.color = "#404040";
qFocusEventTextArea.innerHTML = "No Event Yet";
qFocusEventTextArea.onfocus = function(e) {
  qFocusEventTextArea.innerHTML = "Focus";
};
qFocusEventTextArea.onblur = function(e) {
  qFocusEventTextArea.innerHTML = "Blur";
};
qBody.appendChild(qFocusEventTextArea);

Core JavaScript

Mouse Events

MouseEvents.html

MouseEvents.js

Output