Handling Events with jQuery

We’ve already seen one event that we’ve used with jQuery – $(document).ready(), however, there are a lot more events that we can work with.

What is an Event?

An event is something that happens within an application. When we talk about Event Driven Programming, we often are talking about Desktop GUI applications, but we don’t have to. Web pages can fall into this category as well.

Depending upon your application needs, and your browser within reason, there are various events you might use in JavaScript. jQuery handles several common events that you will most often need. jQuery events are broken into different categories, as you see here:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
			ready

How to Program for the Event – Event Listeners

Earlier versions of jQuery had their own event handlers, however, now we most commonly see people using the on() method, and then pass in the event handler you want to apply to your item that you selected. There are a couple of reasons for this, including it allows objects not created yet on the page, to still utilize the event handler that you have created using the on() method.

In this event handler, the event you want to listen for will be the first parameter passed to the method. Then you will pass a function of what you want to occur when the event occurs as the second parameter. You can see a general form below, and then a specific example after that.

// general form
$('selected item').on('event type', function() { });

A more specific example would look something like:

$('a').on('click',function() {
   $(this).text("Clicked");
});

Dissecting This Code

We used the $('a') to select all links and apply this event handler to those links. We could have just as easily used any other CSS3 selector to select any other element we wanted.

The on() method selected which event we were looking at, 'on', and then what was supposed to happen through an anonymous function. We could have passed in another function created elsewhere, but it is rare to do that.

Using $(this) is to specify which element is active based upon the event handler. Then, we look at what do we want to do to that element, such as changing the text of the element, adding/removing a CSS class, etc. If we had specified $('a') like we did when we selected it, then all over the values would have changed.

The text() Method

This is a fast method that allows us to change the text of an element. However, we can only display plain text. If we try to put in any HTML tags if will display the tags as text.

$(this).text("<strong>Clicked</strong>"); // this won't end well.

Instead, we will want to use html(). The html() method will allow us to add any HTML tags we want to the selected element(s).

Chaining … By Using Mouse Enter/Leave

Once you select an element, you can chain multiple events, or even methods, to them. Selecting the element is one of the more time-consuming processes, so being able to reuse that selector is important.

One example is when you want to do something when the mouse enters/leaves the clickable area of an element. Here we’ll keep using the . operator to access the method of jQuery. This allows us to chain another method to the selected item. This is because many methods in jQuery return the jQuery object.

Those methods that don’t return the jQuery object usually return a value stored at the selected object, either in the data element, within the element, as an attribute, etc.

var lastButtonText = '';
$('a').on('click', function () {
        $(this).html("<strong>Clicked</strong>");
    })
    .on('mouseenter', function() {
        lastButtonText = $(this).html();
        $(this).text("Quit touching me!!!!");
    })
    .on('mouseleave', function() {
        $(this).html(lastButtonText);
    });

Notice how we don’t use a semi-colon to end the statement of the chained methods, until the last one.

Handling Events with jQuery was originally found on Access 2 Learn