JAVASCRIPT

Handling Mouse Events with the jQuery JavaScript Library

Welcome to the second part of a multi-part series that introduces you to the jQuery JavaScript library. In this article, I will provide you with a quick overview of how to handle the “mouseup” and “mousemove” events with the jQuery package.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

August 19, 2009

TABLE OF CONTENTS:

Okay, that sounded a little bit exaggerated, I admit it, but indeed the library permits to attach a “mouseup” event to any element within a web page with great simplicity. Precisely, the following hands-on example demonstrates how to display an alert box in response to the mentioned event, before redirecting an user to the Dev Shed main page.

Here’s the corresponding code sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with mouseup event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("a").mouseup(function(){

alert('Redirecting to Devshed.com now!');

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with mouseup event</h1>

<a href="http://www.devshed.com/">Visit Devshed.com now!</a>

</body>

</html>

As illustrated by the above example, assigning a “mouseup” event to a link within a web document is a process reduced to attaching not surprisingly a “mouseup” method to the link in question via the pertinent $() function. Again, in this case I’d like to denote how the entire JavaScript code that implements the behavior of the mentioned link is placed outside the corresponding structural markup. Simple and efficient, right?

So far, everything looks fine and good, since you hopefully learned how to build a simple JavaScript application that responds to a specific “mouseup” event by popping up an alert box on screen. So, what comes next? Well, as I stated before, the “jQuery” library is also capable of handling other common mouse events in an approachable fashion. Therefore, in the final section of this article, I’m going to teach you how to create a simple JavaScript application that reacts to a “mousemove” event.

Click on the link shown below and keep reading. We’re almost finished!

Next: Handling mousemove events simply with the mousemove method >>