• Choose a category
• All
• Classic-Fiction

The best part about the support action is that it forces you to understand exactly what bugs you’re working around. With browser sniffing it’s easy to become complacent and start putting more code than is necessary in conditional blocks. By using support you only target very specific aspects, ensuring your users enjoy a consistent (or at least acceptable) experience, regardless of how the vendors modify their browser code.

Events

We’ve spent a lot of time looking at events, and as we’ve mentioned on a few occasions, jQuery simplifies the cross-browser event handling process by normalizing events to conform to the W3C standard. A normalized event object has a stack of properties and methods that can be useful to us. We’ve used some of them throughout the book, and now we’ll look at the ones that got away! You can find the full list of event properties in the jQuery Events documentation.

Event Properties

We saw this briefly in Chapter 9: the type property will give you the name of the event that fired (even for custom events, if you’ve named them).

When an event handler is called, you can obtain the DOM element that was the source of the event via the target property. This can also be wrapped in a jQuery selector to escape the pesky DOM and back into happy jQuery land. Additionally, if the event is a mouse movement, you can find the element that was the previous target (where the mouse previously was) with the relatedTarget property. And if the event is moving up through the hierarchy—when you’re dealing with bubbling events—the currentTarget will inform you of the target for the current bubbling phase.

A final, extremely useful property is the event’s timeStamp. This gives you the precise time when the event occurred, and it’s most commonly employed when implementing time-based effects. For example, if you wanted to create a special triple-click event on your page, you could consult the events’ timestamps to see if three clicks had occurred in a given span of time.

Event Methods

We’ve seen a bunch of the event methods we could use, like preventDefault and stopPropagation, which let us control how events bubble and are handled by the browser. There are a couple of extra methods though. One more in the same vein is the stopImmediatePropagation method, which is a bit more hardcore than stopPropagation. While stopPropagation prevents parent handlers from running, stopImmediatePropagation stops any further event handlers from running—even on the same element.

The rest of the methods simply report whether or not any of the other methods have been called. The isDefaultPrevented, isPropagationStopped, and isImmediatePropagationStopped methods return a Boolean value that would be false, unless the respective commands had been issued.

DIY Event Objects

While we’re talking about events, there’s one final aspect you might like to know about them: you can create your own event objects and pass them directly to handlers. Check out this code:

// Regular event binding

$('p').bind('click', function(e) {

$(this).text(e.pageX);

});

// Home-made event object!

var e = $.Event('click');

e.pageX = 100;

e.pageY = 100;

$('p').trigger(e);

We’ve created an artificial click event and manually set its pageX and pageY properties. This gives you ultimate control over the details of the event that triggers an event handler.

Appendix B. JavaScript Tidbits

We can’t stress this enough: jQuery is just JavaScript—so the best way to improve your jQuery skills is to brush up on your JavaScript knowledge! We’ll have a look now at a few aspects of JavaScript we used throughout the book that you might be wondering about.

Note: Learning More about JavaScript

If you’re looking to take your JavaScript to the next level, we highly recommend Douglas Crockford’s JavaScript: The Good Parts (Sebastopol: O’Reilly, 2008). It’s not particularly light reading, but it’s a succinct and pragmatic explanation of how and why JavaScript rocks!

Type Coercion

JavaScript is what’s