CodingBison - JavaScript Events: Mouse Events

JavaScript supports several mouse-related events that allow us to capture user actions associated with mouse. We begin by providing a table that lists various events along with a short description.

Table: Mouse Events
Event	Description
onclick	when we click the mouse.
ondblclick	when we double-click the mouse.
onmousedown	when we hold the mouse button (typically left) down.
onmouseup	when we release the previously held mouse button.
onmouseover	when we move the mouse over an object.
onmouseout	when the mouse moves away from an object.
onmousemove	when the mouse moves.

Let us describe these events. The first two events onclick and ondblclick are associated with a single click and double-click of the mouse. The next event, onmousedown, is triggered when we press the mouse button down (either left or right) and mousedown is triggered when we release the previously pressed button. The event onmouseover is triggered when the mouse goes over an element and is true as long as the mouse remains on that element. The onmouseout event is triggered when the mouse leaves that element. Lastly, onmousemove even is triggered when the mouse moves while it is on the element.

Out of these events, all of the events are cancellable except the onmousemove. And, in terms of being able to bubble, all of the above events bubble.

The element that gets attached with the mouse event could be an anchor, an image or the window and the document element itself.

Let us start by adding these mouse events to the window object; we provide below an example that binds various mouse events to the window object. This examples handles these events and when they occur, it updates the text on the main page with the corresponding text from the handler functions.

 <!doctype html>
 <html>
 <head> <h2> A Trivial Page </h2></head>
 <body>
 <div id="idDiv"></div>
 <script type="text/javascript">
 var elem;  // Global Variable.

 function printOnclick() {elem.innerHTML += "Mouse click<br>";}
 function printOndblclick() {elem.innerHTML += "Double Mouse click<br>";}
 function printOnmousedown() {elem.innerHTML += "Mouse Down<br>";}
 function printOnmouseup() {elem.innerHTML += "Mouse Up<br>";}
 function printOnmousemove() {elem.innerHTML += "Mouse Move<br>";}

 function addThisEvent(obj, eventType, eventHandler, capturingType) {
     var newEventType = "on" + eventType;
     if (obj.addEventListener) {
         obj.addEventListener(eventType, eventHandler, capturingType);
     } else if (obj.attachEvent) {
         obj.attachEvent(eventType, eventHandler);
     } else if (obj[newEventType]) {
         obj[newEventType] = eventHandler;
     }
 }

 window.onload = ( function() {
     elem = document.getElementById("idDiv");
     elem.innerHTML += "Page has loaded<br>";
     addThisEvent(window, "click", printOnclick, false);
     addThisEvent(window, "dblclick", printOndblclick, false);
     addThisEvent(window, "mousedown", printOnmousedown, false);
     addThisEvent(window, "mouseup", printOnmouseup, false);
     addThisEvent(window, "mousemove", printOnmousemove, false);
 });
 </script>
 </body>
 </html>

Here is the browser output when we trigger various mouse events on the window. In fact, in the above code, we could have also added these events to the document object instead of the window object and the output would be same as before.

Figure: Mouse events for window

If we wanted to add mouse events to other HTML elements, then we can do this similarly. In the following example, we show adding two mouse-events -- onmouseover and onmouseout events -- to an anchor element. With this example, when we hover the mouse over the anchor or when we move the mouse out of the anchor, then the corresponding text is added on the page.

 <!doctype html>
 <html>
 <head> <h2> A Trivial Page </h2></head>
 <body> 
 <a href="http://www.twitter.com" id="idAnchor"> Twitter: Go tweet something magical! </a>
 <div id="idDiv"></div>
 <script type="text/javascript">
 var elem;  // Global Variable.

 function printOnmouseover() {elem.innerHTML += "Mouse Over<br>";}
 function printOnmouseout() {elem.innerHTML += "Mouse out<br>";}

 function addThisEvent(obj, eventType, eventHandler, capturingType) {
     var newEventType = "on" + eventType;
     if (obj.addEventListener) {
         obj.addEventListener(eventType, eventHandler, capturingType);
     } else if (obj.attachEvent) {
         obj.attachEvent(eventType, eventHandler);
     } else if (obj[newEventType]) {
         obj[newEventType] = eventHandler;
     }
 }
 window.onload = ( function() {
     elem = document.getElementById("idDiv");
     elem.innerHTML += "Page has loaded<br>";

     var aElem = document.getElementById("idAnchor");
     addThisEvent(aElem, "mouseover", printOnmouseover, false); 
     addThisEvent(aElem, "mouseout", printOnmouseout, false); 
 });
 </script>
 </body>
 </html>

Here is the browser output when we move the mouse over the anchor link.

Figure: Mouse events for an anchor