One of the great things about jQuery is its built in event handler system, which gives you a whole host of predefined user events that you can listen out for and act upon. When I talk about user events, I am talking about keydown, keyup, mousedown, blur, focus etc… You can listen out for all of these events, more importantly on specific elements, be it form elements, DIV’s, images… whatever. This tutorial will discuss how to listen out for events on your DOM objects, following up tomorrow with a more in depth view.

But why bother listening?

Have you ever gallantly filled a long form in, only to be told after pressing submit that xxx field was wrong, or your password didnt have a number in it etc etc. It’s annoying right? You can fix this horrible usability issue in your application. Listening for events on form elements in particular is a great way to increase the overall usability of your site, by feeding back to the user in real time before they even press submit!

Listening for key events

First off, you need to listen out for a particular event. Let’s take an example, your site asks the end user a question: “What is your name?”. In normal scenarios you have an input box and a submit button. What you can do when listening for events is detect when a user enters the input box, starts typing, exits the box etc etc. From a usability perspective, it might be nice to do something as the user is typing in a name – so how do we do that?

First off, we write the code for your user form:

<form>
<input type="text" id="username"  name="username">
<input type="submit" id="submit"  value="Submit">
</form>

A basic example! The important part here is to tag up the elements with an ID and NAME attribute – preferably the same value. Once complete, you need to write your event listener in jQuery. You should write your listener in the $document.ready() jQuery function. $document.ready() is called once all DOM elements are loaded (or 99.9% anyway), so you can be pretty sure when the listener code is being called to wire up to your input box, it’ll work! Here’s the jQuery:

$(document).ready(function(){
$("#username").keyup(function(){
});
});

Very easy. This code simply says, when a user types in the object “username”, carry out this function. So, therefore each new character entered into the text box will call this function. We’ve used “keyup” so that if you wanted to get the value of the textbox at that time, you are guarenteed to get the correct value. You can get the value by doing the following:

$(document).ready(function(){
$("#username").keyup(function(){
var  userValue = $(this).val();
});
});

Why is this powerful?

It means that you can run validation on what the user is typing in realtime without form submission. Within your keyup function, you could check for a valid username as they type for example (think search as you type). A more complex example would be password strength validation. You can check the current password as they type against your strength algorithm, and feedback to the user as they write it. I’ve used it against an email address regular expression, so my form would feedback to a user and tell them whether the email address they were typing was valid or not before they even left the input box.

Web 2.0 is all about usability, and using these events will shove your old school site into the gleaming world of 2.0 in an instant – with a couple of lines of code…. The rest is down to your imagination!

I really hope this short and simple tutorial demonstrates the ease of jQuery, and why you should be using it. In tomorrows tutorial we will go through how to listen out for specific key events, perhaps a particular character, or when the [ESC] key is pressed for example.

Some books to help you learn:

Learning jQuery	JQuery In Action	jQuery Reference Guide

This entry was posted on Tuesday, January 27th, 2009 and is filed under Development, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.