JQuery_ Novice to Ninja - Earle Castledine [140]
Events
The event system in jQuery is very powerful. Its primary purpose is to normalize all browser events to match the W3C standards, thus allowing us to perform cross-browser event handling with relative ease—but that’s just the tip of the iceberg. A lot of thought has gone into the internal event system in the core library, and this functionality has also been exposed to those developers who are looking to do more than just react to simple events.
Event Properties
With a standardized event in your hands, you can rely on the features that the standards set out. So what exactly does that mean? The jQuery event wrapper gives you a lot of properties and events to play with, though there’s too many to list here (the full list is in the section called “Events” in Appendix A). You’ve already seen many of the commonly used features throughout the book—the pageX and pageY properties, and the stopPropagation and preventDefault methods. But where do those events you assign actually exist? How does a lowly paragraph tag know to react when it’s clicked? jQuery gives you a way to see what a particular element is set up to do by storing the events, using the data action under the key 'events'.
To see this in action, we’ve set up a paragraph tag and attached three events to it: two separate click events, and one mouseover event. We’ve given the functions names so that we can easily identify them inside our debugger:
chapter_09/10_event_properties/script.js (excerpt)
$('p:first').click(function firstClick() {
// first click handler
})
.click(function secondClick() {
// second click handler
})
.mouseover(function firstMouse() {
// first mouseover click handler
});
Should you want to access the details of those event handlers at a later point in your code, you need only call .data('events') on your paragraph:
chapter_09/10_event_properties/script.js (excerpt)
var events = $('p:first').data('events');
console.log(events);
The data('events') call gives us back an object containing references to all of the events attached to that paragraph. You can see an output of the event data in the Firebug console (see the section called “Troubleshooting with console.log” in Chapter 4) in Figure 9.1.
Figure 9.1. data('events’) inspected in Firebug
The event data contains both the event type and the event handlers themselves, nested inside the object.
Custom Events
We saw earlier that bind and trigger do all the real work for the events that we fire; they’re behind the scenes of click, mouseover, toggle … every one of them! The shorthand actions make for shorter, more readable code, and the expanded bind and trigger syntax provides exactly the same functionality. Why use bind and trigger then? It turns out that they’re far more versatile and powerful than we’ve witnessed thus far. For starters, we can break away from browser-specified events and start creating some of our own!
Creating your own events helps to make your code clearer; for instance, a function buried in a click handler needs to be analyzed to determine its purpose, whereas an event with a specific name might be easier to comprehend at a glance. Let’s have a look at creating a custom do-toggle event. To do so, we’ll go all the way back to the disclaimer message example we saw in Chapter 2:
chapter_09/11_custom_events/index.html (excerpt)
Disclaimer! This service is not intended …
This time, instead of the button being responsible for toggling the disclaimer, the disclaimer will be responsible for toggling itself:
chapter_09/11_custom_events/script.js (excerpt)
$('#disclaimer').bind('do-toggle', function() {
$(this).toggle('slow');
});
We have bound our custom do-toggle event to the disclaimer element. When the do-toggle event fires, the function will run and the disclaimer will hide or show itself. But how do we fire the do-toggle event? By using the trigger method:
chapter_09/11_custom_events/script.js (excerpt)
$('#toggleButton').click(function()