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:

As I mentioned in the section that you just read, the “jQuery” library includes a robust set of methods to handle typical keyboard events. Of course, this feature can be pretty useful, for instance, where it’s necessary to trigger a particular JavaScript function when a key is pressed or released.

However, it’s time to get rid of the rather boring theory and develop a concrete example that shows how to use the library for handling a “keydown” keyboard event. Below I included a simple script that will show an alert box on the screen each time a key is pressed down on a simple link. Here it is:

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

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color:#000;

}

</style>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

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

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

</body>

</html>

The above example should be very simple for you to grasp, since its source code is practically identical to the script developed in the previous section. Of course, as you may have noticed, the only difference to stress here is that in this specific case I used a brand new method, called “keydown(),” to pop up an alert box on the browser each time a key is pressed down and the link that points to “Devshed.com” gets focus.

Despite the limited functionality of the prior example, it's useful for demonstrating in a nutshell how simple it is to intercept a certain keyboard event by using the specific methods packaged with the “jQuery” library.

And finally, with this last practical example, I’m finishing this third installment of the series on the jQuery JavaScript framework. As with many of my articles on web development published here on the prestigious Developer Shed network, feel free to use all of the code samples included in this tutorial. This will help you to learn more quickly how to use this friendly framework when it comes to handling mouse overs and basic keyboard events.

Final thoughts

In this third episode, I walked you through exploring the solid capabilities of the jQuery JavaScript library to handle mouse overs and “keydown” events. As you saw earlier, these two process are quite straightforward and shouldn’t be difficult to understand at all.

In the forthcoming article, I’m going to show you a few more methods provided by the library, which can be used to handle some other common keyboard events.

Now that you’ve been warned, don’t miss the next tutorial!

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.