Event Handling in jQuery

In the first two posts on jQuery, I discuss its basic usage on a page and its selectors. That basic knowledge—from me or elsewhere—is required to continue reading here. In this post, I get into event handling in jQuery. With standard JavaScript, events like onclick and onmouseover are added to page elements, either in a script tag or in the element’s tag, like this:

<input type="text" id="something" onchange="callThisFunction()" />

In jQuery, the preference is to put the JavaScript within SCRIPT tags in the HEAD of the page, not lost in the rest of the HTML body (this is part of the Unobtrusive JavaScript philosophy). So you would first select a particular element using $(‘#something’) or whatever, then call the method associated with the desired event. The onchange in the above code becomes change(), onfocus becomes focus(), onmouseover is mouseover(), onclick becomes click(), etc. Normally each of these is passed an anonymous function to be executed when the event occurs:

$('#something').change(function() {
    // Do whatever.
});

Within the anonymous function, this refers to the element that’s the recipient of the event. So to alert what the user just entered into the text box, you would code:

$('#something').change(function() {
    alert($(this).val());
});

Also, to be clear, the val() method returns the value of an element. With a text input, the value is the text entered into it.

Note that because you can’t reference Document Object Model elements until after the DOM has loaded, you’d put this code into a function that’s called after that point:

$(function() {
    $('#something').change(function() {
        alert($(this).val());
    });
});

As I discussed in my first post on jQuery, the above syntax is shorthand for

$(document).ready(function() {
    // Do whatever.
});

What this means is that ready() is a method associated with an event, specifically the browser window’s event of the DOM having been loaded.

There are other ways in jQuery to associate events with elements. Two nice methods—hover() and toggle()—take multiple functions as arguments. The hover() method takes a mouseover function as its first argument, the mouseout function as its second. So using it you can easily invoke whatever code with this common event pair. The toggle() method takes two or more functions as arguments. Each subsequent function will be executed upon repeating clicks upon that element. Also, I should point out that the bind() method is an alternative way of associating events with elements. This method takes the event type as its first argument, the function to be called as its second. The above example could be rewritten as:

$('#something').bind('change', (function() {
    alert($(this).val());
});

The jQuery documentation discusses all of the event-related methods, of course. There are several related to key events, and other important ones like: submit(), for when a form is submitted; select(), for when an element is selected; and, resize(), for when the browser window is resized. They’re all well documented, with examples. And, of course, these are all browser-independent ways of handling events in jQuery.

In the next post, I plan on discussing some of jQuery’s effects, like hiding and showing elements.