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:

Of course, if you studied in detail some of the examples developed earlier, it’s possible that you have an approximate idea of how to build this kind of application using jQuery. So, in simple terms, the assignment of a mousemove event to a targeted web page element can be performed by using a new method of the library, called obviously mousemove.

In this case, the use of this method is illustrated by the example below. Have a loot at it, please:

<!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 mousemove event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color:#000;

}

</style>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

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

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

</body>

</html>

That was really simple to code and grasp, wasn’t it? As you can see, the above example looks nearly identical to the one that I created in the prior section -- except for one small difference. In this specific case, if a user moves the mouse over the link that points to “Devshed.com”, then he/she will be faced with an alert box before being redirected to that web site.

Naturally, the response to the pertinent “mousemove” event is triggered by the method of the same name, which has been attached to the link via the $() function. Concise and educational!

Undoubtedly, this concluding example is the appropriate ending for this second article of the series. Hopefully, all of the code samples included in this tutorial will help you understand more clearly how to handle different mouse events with the jQuery library. As you saw before, all that you need to do to attach a particular event to one web page element is to invoke the appropriate event handling method. It’s that simple, really.

Final thoughts

In this second chapter of the series, I provided you with a quick overview of how to handle the mouseup and mousemove events with the jQuery package.

In the upcoming part, I’ll continue exploring the library’s event handling capabilities, but this time to process some additional mouse-related events, along with simple keyboard actions.

Now that you’ve been warned about the topics that will be discussed in the next article, you don’t have any excuses to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.