JAVASCRIPT

More Mouse and Keyboard Events with the jQuery JavaScript Library

Welcome to the fourth article in an eight-part series on the jQuery JavaScript library. In this part, I will walk you through using a pair of brand new methods provided by the library for processing some additional keyboard-related actions, such as keydown and keyup events.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

September 02, 2009

TABLE OF CONTENTS:

In the previous section, you hopefully grasped the logic that stands behind handling mouse overs and keydown events with the jQuery JavaScript library. As you learned before, assigning these concrete event handlers to an element within a web document is only a matter of tying the proper method to the element in question. It's that simple, really.

Since jQuery provides a concrete method for handling each JavaScript event, you won't be surprise if I tell you that it can be used to process keypress actions in a simple and intuitive manner by using an approach nearly identical to the ones shown in previous examples.

Below I included a code sample which demonstrates how to create a simple JavaScript application that responds to a keypress event. Here's how this brand new example looks:

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

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color:#000;

}

</style>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

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

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

</body>

</html>

Well, as you can see in the above example, I used a brand new method, called "keypress()," to intercept the homonymous event. In this case, as I did with other previous hands-on examples, the response to the event is simply displaying an alert box, but naturally the same logic can be implemented when developing real-world web applications.

Okay, now that you hopefully understood how to use the handy "keypress()" method bundled with the jQuery JavaScript library, it's time to continue exploring its capabilities for processing keyboard-related events.

Therefore, in the last section of this tutorial I'm going to teach you how to use the library to intercept "keyup" events.

Next: Using the keyup() method >>