I'm Gilbert Pellegrom.

In the web development world there has been one Javascript framework which has really made it’s mark over the last couple of years. I am of course talking about jQuery. Everyone is using it including Google, Wordpress, Drupal, Mozilla, Digg… and the list goes on. And there is good reason for this, mainly that it is a very flexible, extendible and powerful framework for Javascript.

One of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. So I thought I would share with you an introduction to jQuery Events.

So how do events work?

Events work by binding a function that will be executed when that event is triggered. What triggers the event depends on what the event is (e.g. a “click” event will be triggered when you click something, funnily enough). Infact, if you have been using jQuery properly, you might have already been using events without even noticing it:

$(document).ready(function () {
    //Do your work here...
});

The above code should always be used before you do anything with jQuery.You will see this code all the time when people are using jQuery. However what you might not know is this is that ready is actually an event and the code you put inside of it is the function you are binding to the ready event.

So what events are there?

There is a wide range of events that are supported by jQuery. At the time of writing (v1.3) there are 20 event helpers:

• blur
• change
• click
• dblclick
• error
• focus
• keydown
• keypress
• keyup
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup
• resize
• scroll
• select
• submit

As you can see this provides an array of possible events to attach to your elements. To see these events in action have a look at the demo.

So how do I add events to my elements?

This is the easy part. jQuery provides methods which help you handle your events with amazing simplicity. I won’t go through all of the different types of events handlers here however you can see the documentation for these on the jQuery website. The only one we are going to look at here is the bind handler. It can be used like this:
HTML

<style>
p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<p>Click or double click here.</p>
<span></span>

Javascript

$("p").bind("click", function(e){
    var str = "( " + e.pageX + ", " + e.pageY + " )";
    $("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
    $("span").text("Double-click happened in " + this.tagName);
});
$("p").bind("mouseenter mouseleave", function(e){
    $(this).toggleClass("over");
});

As you can see it is uber simple to add events to almost any DOM elements using jQuery’s selector and the bind function. And remember that events can be added to more than just <p> tags. In the demo we attach our events to inputs just as easily.

Conclusion

So there you have it. A simple introduction to events in jQuery. Remember to read up on the documentation for all of the events to see what amazing possibilities can be achieved with some simple javascript code. And as always let me know what you think about jQuery events. You could even share some examples of sites that you have made that use jQuery events.