JQuery: getting started with events

Now that we’ve covered several methods for interacting with the wrapped set, it’s time to keep going and we’ll start looking at how JQuery simplifies event handling. As we’ll see, JQuery introduces several methods which reduce and simplify the code we need to write for handing events across different browsers. Most of the time, you’ll end up using the bind method for hooking up an event.

Take a look at the following code:

<input type="button" value="wrap items" id="bt" />
<script type="text/javascript">
  $(function() {
    $("#bt").bind("click", function(evt) { alert("someone clicked on #bt"); });
  }  );
</script>

Many of you might asking something like “Hum, what about the click method?”. It’s a fair question…The truth is that internally the click method relies on the bind method for hooking up the event with a function. Typically, you’ll use the bind method in a similar fashion to the one you’ve seen in the previous snippet: you start by getting a JQuery object and then you call the bind method passing the event you’re interested in and a function that will be called. For a complete list of events, consult the documentation on JQuery’s site.

Notice that there’s also a variation of the previous form:

$("#bt").bind("click", "howdy", function(evt) { alert(evt.data); });

In the previous snippet, we’re passing some custom data that can be recovered from within the anonymous function that was hooked up with the click event. Notice how we can recovered the passed object (which, in the previous example was a simple string) by accessing the data property of the evt object that is passed to that anonymous function.

Ok, but what is that evt parameter I’ve used in the previous examples? Glad you ask…it’s a JQuery Event object which contains info related with the current event! If you’re doing web development for some time, then this is the event object standard browsers pass to the functions that handle events; on the other hand, if you’re thinking IE, then this is the IE event object which you get when you access the global window.event property.

Before passing the object to the method, JQuery makes sure that several properties are safe to be used in a platform independent manner. For instance, if you’re handling a keyup or keydown event, then you can get he code of the pressed key by accessing the keyCode field of the JQuery’s Event object instance. Take a look at the docs for a complete description of the JQuery Event object.

Another interesting feature of the bind method is that you can hook up several methods for a specific event. Here’s how you’d do that:

$("#bt").bind("click", "howdy", function(evt) { alert(evt.data); })
       .bind("click", function(evt) { alert("howdy 2"); });

As you can see, to achieve that goal you only need to call bind multiple times over the wrapped set. Btw, you can also hook up several events with a single function by writing a simple JQuery code line:

$("#bt").bind("click mouseover", "howdy", function(evt) { alert(evt.data); });

The previous snippet ends up calling the anonymous function when you pass the mouse over the #bt element or when you click on it. This is really great, isn’t it? There’s still a lot more to say about JQuery and events, but we’ll leave that for future posts. Keep tuned!