JAVASCRIPT

Handling Mouse Overs and Keyboard Events with the jQuery JavaScript Library

Welcome to the third part of an eight-part series introducing the jQuery JavaScript library. This series provides you with a quick overview of the most important features that come packaged with the jQuery JavaScript framework. You'll learn how to manipulate web pages via the DOM, handle different mouse and keyboard events, develop Ajax applications, and create eye-popping effects.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

August 26, 2009

TABLE OF CONTENTS:

Before I start teaching you how to use the “jQuery” library to handle mouse overs and some basic keyboard events, I’d like to reintroduce the pair of examples developed in the preceding article. They demonstrated how to process, in a basic manner, “mouseup” and “mousemove” events via the API provided by jQuery.

That being said, here are the corresponding code samples that show how to handle these mouse events:

(example on handling a 'mouseup' event with jQuery)

<!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>

(example on handling a 'mousemove' event with jQuery)

<!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>

As you can see, the hands-on examples listed above use the pertinent “mouseup()” and “mousemove()” methods included with jQuery to display some simple alert boxes on the browser. These boxes are displayed in response to the same mouse events.

In addition, it’s worthwhile to notice how the link that triggers the display of the alert boxes is accessed via the handy $() function. Pretty simple and effective, right?

So far, everything looks good. At this point, I’m sure that you’re familiar with using the “mouseup()” and “mousemove()” methods to handle these typical mouse events. However, as I mentioned in the beginning, jQuery comes with many other helpful methods. These can be used not only for processing a bunch of mouse-related events, but for checking whether or not a determined key has been pressed.

In the course of the following section, I’m going to set up another example for you, to demonstrate how to easily handle mouse overs with jQuery.

To learn how this will be done, please click on the link that appears below and keep reading.

Next: Using the mouseover() method >>