Modules > jQuery > jQuery Events

jQuery Events

• JavaScript Intro exercise files

Up until now we've only modified our document with JavaScript once the DOM is ready. While that's neat, it's not very interactive. In order to make our pages interactive, we have to learn how to use JavaScript events.

Events come in all shapes and sizes. There are ones that react to various mouse clicks or locations, ones that react to key presses and even ones for touch interactions. While browsers handle events a lot more uniformly than they did in the past, there are still some differences. jQuery helps patch over these differences and provides a uniform starting point for us.

On method

The on method allows us to bind a function to a browser event. In its simplest form, it takes two arguments. The first is the event name and the second is the event handler. The handler is a function that executes when the event occurs.

$( 'selector' ).on(event, handler);

Let's start with a simple click event. This triggers when we click the left mouse button. We'll use the html method to replace the HTML inside our div with a new paragraph.

$( '#example .one' ).on('click', function() {
  $( '#example .one' ).html('<p>Clicked it!</p>');
});

There are several things going on here:

• We're using a function without a name. This is really common in JavaScript and is known as an anonymous function
• By attaching the on method with the click event to the div, we're binding that function to it. You'll hear people say we've bound the anonymous function to the click event.
• The function is the handler in this case.

Try adding the JavaScript above into the events.js file. Remember to use the document ready code around all of your jQuery!

$( document ).ready(function() {
   
  // Your JavaScript goes here...
	
});

Click on the first div in the page to see if it worked.

this keyword

We can use the this keyword to simplify our previous example. The this keyword refers to the object we're referencing inside a function. In this case, it will be the jQuery object that we attached the event to.

$( '#example .one' ).on('click', function() {
  $( this ).html('<p>Clicked it!</p>');
});

Notice there are no quotes on this.

Using this inside the function instead of rewriting the jQuery object is more concise and will have a slightly better performance.

Using named functions for events

Sometimes you want to reuse event handles in different places. Instead of using the code above with an anonymous function, you can create your own named function. You can then specify that function to execute when the event is triggered.

// Named function
function clicked() {
 $(this).html('
Used a named function!
');
}

// Use the name of our function as the handler - don't use the parentesis after the function
$( '#example .two' ).on('click', clicked );

Other Event Types

There are many event types to chose from. Here are some common ones:

• Simple events: hover, click
• For the mouse: mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup
• For the keyboard: keypress, keyup, keydown

Let's define some events for mouseenter and mouseleave. We'll add and remove the class highlight on the third box.

$( '#example .three' ).on('mouseenter', function() {
  $(this).addClass("highlight");
} );

$( '#example .three' ).on('mouseleave', function() {
  $(this).removeClass("highlight");
} );

Using the mouseenter and mouseleave events like this is so common that jQuery provides us with a shortcut function: hover() . It takes one or two arguments. If you specify two arguments, the first is the handler on the mouseenter while the second is the handler on the mouseleave.

$( '#example .three' ).hover( 
  function() {
    $(this).addClass("highlight");
  }, function() {
    $(this).removeClass("highlight");
  }
);

If just one argument is specified, it will execute on both mouseenter and mouseleave. Here we fade the box in and out quickly.

$( "#example .four" ).hover(function() {
  $( this ).fadeOut( 200 );
  $( this ).fadeIn( 200 );
});

jQuery Toggles

The idea of "toggling" something like a class turns out to be very common. Because of this jQuery actually provides us with the toggle and toggleClass methods.

toggle()

toggle() will display and hide an element. Once the element is hidden, it will be removed from the document flow.

$( '#toggle' ).on('click', function() {
  $('#example .five').toggle();
});

You can adjust how the element toggles by adding in some keywords: slow, fast

$( '#toggleslow' ).on('click', function() {
  $('#example .six').toggle('slow');
});

toggleClass()

toggleClass() is similar except that it will toggle the presence on the named class. Here we toggle our highlight class on and off. Much easier than the previous example!

$( '#toggleclass' ).on('click', function() {
  $('#example .seven').toggleClass('highlight');
});

More Resources

• jQuery Learning Center
• jQuery API
• lynda.com: jQuery for Web Designers
• lynda.com: jQuery Essential Training Chapters 1, 2, 4 and 5 would be particularly helpful.

Exercise 1

Experiment with adding different types of effects to various events. Use the demo page as a starting point.

• Create new buttons and practice attaching various events
• Use the event handlers on the buttons to modify the effects to other elements on the page.
• Experiment with the following methods: show(), hide(), slideToggle(), fadeToggle(), fadeIn(), fadeOut()
• Google jQuery and the method to find out more information on how to use it.

Modules > jQuery > jQuery Events