jQuery Fundamentals Part 4: Events

This is the fourth part of a 5 part series on jQuery fundamentals. In this part, we will look at how to handle events that occur within your document. The next post will look at jQuery UI.

Introduction

Selection

Manipulation

Events

jQueryUI

One of the great strengths of jQuery is it's ability to abstract many of the annoying differences in the way different browsers interpret javascript. As a result, we no longer need to worry about the difference between the traditional event model vs the W3C event model vs Microsofts Jscript event model. We just implement events using jQuery, allowing jQuery to handle differences between browsers for us.


jQuery uses the Bind() method to attach events to an HTML element. The Bind() method takes two parameters. The first parameter is a string identifying the type of event you want to attach. The second parameter is an event handler that is called when your new event fires.

In this example, I am binding a mousout event to all <div> elements on my page. Whenever a mouseout event occurs on a <div> element, the event handler will notify the user using the “alert” method.

$(‘div’).bind(
     ‘mouseout’,
     function() {
          alert(“mouse out event has fired”);

     }
);

You may also refer to the “this” object in your event handler. The “this” object refers to the html element that fired the event. In this example, I attach a “click” event to all <p> elements with an ID of “clickable. When the click event fires, the event handler checks to see whether the <p> element that was just clicked has a CSS class called “tmpExampleOn”.

$(‘p #clickable’).bind(
     ‘click’,
     function() {
          if ($(this).hasClass(‘tmpExampleOn’)) {
               alert(“this <p> has the class”)

          }

          else {

               alert(“this <p> doesn't have the class”);

          }
     }
);

jQuery also defines a shorthand way of binding events using dot notation. The following examples do the exact same thing using short hand notation.

$(‘div’).mouseout (
     function() {
          alert(“mouse out event has fired”);
     }

);

$(‘div’).click(
     function() {
          if ($(this).hasClass(‘tmpExampleOn’)) {
               alert(“this <p> has the class”) 

          }

          else {

               alert(“this <p> doesn't have the class”);

          }
     }

);

These methods should fill most of your event binding needs. However, these two methods will only bind events to HTML elements that are currently on the page. But you already know from the previous post on jQuery Manipulation, that you can insert and delete HTML elements from the page using jQuery's manipulation methods. So how can you bind an event handler to all future elements not currently on the page?

The answer is to use the Live() method. The Live() method works the exact same way as Bind(), but attaches the event to all future selections, instead of just elements matching the selection currently on the page.

This example binds a mouseout event to all <div> elements currently on the page, plus any <div> elements you may insert to the page in the future.

$(‘div’).live(
     ‘mouseout’,
     function() {
          alert(“mouse out event has fired”);

     }
);