• Choose a category
• All
• Classic-Fiction

With our element unhighlighted, we can remove all of the event handlers in our effect’s namespace with a single unbind command. We target the namespace by passing only '.colorize' as a parameter.

Namespacing your events is particularly useful when you’re creating plugins. You now have an easy way to control all the events that your plugin adds to the DOM without worrying about what the user (or other plugins) might have also attached. When it comes time to tear everything down, you can clean up with a simple unbind.

If you want to trigger only non-namespaced events, you can add an exclamation mark (!) to the end of your trigger parameter. If we wanted to run the mouseover events that were outside of our (or any other) namespace, we would execute: $('p').trigger('mouseout!').

Tip: Multiple Namespaces

You’re not limited to playing with a single namespace: if you need to target multiple namespaces in one statement, simply concatenate them with periods.

Binding the iPhone: Non-standard Events

As if the jQuery event system hasn’t proven itself to be a little winner already, it has yet another trick up its sleeve: it can respond to events it should have no knowledge of! This ability is going to become more and more important as we start to move away from the PC as our primary tool for accessing the Web. The number and type of devices on which people will be viewing your pages in the future is going to explode: iPhones, other mobile phones, PSPs, Chumbys, “the next big thing,” and so on. While most of them are going to have to respect the DOM, they will all try to add something of their own to improve human-computer interaction.

And that will mean new hardware-triggered events for us to handle. The iPhone’s touch interface is a great example of this. Although the iPhone can react to mousedown and mouseup events, there are other preferred events to use. There’s a collection of specific events that handle interaction with the touchscreen which don’t make sense on most other devices. Although jQuery doesn’t provide direct access to these events (it would soon be a huge library if it had to support every device’s events!), the bind method is generic enough to catch any events that are fired:

$(document).bind('touchstart', function(e) {

var original = e.originalEvent;

var x = original.changedTouches[0].pageX;

var y = original.changedTouches[0].pageY;

$('#block').css({top: y, left: x});

});

The touch events are defined by a third party, but as long as we have access to the documentation about the events (or can collect our own data with Firebug, or another debugging tool), we can easily capture and respond. In our example, we’re catching the touchstart event that’s fired whenever the user touches the screen.

Because jQuery has no knowledge of touchstart, we need to access the originalEvent from the jQuery event object that’s passed to our callback function. originalEvent gives us access to the unwrapped JavaScript event, free of any of jQuery’s additions. We can now make use of the event exactly as it’s documented. We’re grabbing the X and Y position of the screen touch, and updating an absolutely positioned block element at the touch location.

Tip: Disable mousedown and mouseup

If you’re writing handlers for the iPhone, you might need to disable the default actions for mousedown and mouseup. You can do this by capturing them on the $(document), and using the event.preventDefault action. Otherwise, you run the risk of running the same code twice, because you’ll be triggering both touch and mouse events.

The special Event

Creating your own custom events is undoubtedly quite advanced—but jQuery’s special event construct is downright ninja-like. If you’re feeling a bit restricted by the regular old DOM events, this is for you! Using special is a way to create native-seeming events of your own, or overwrite and augment existing events. You can do some custom code handling every time a handler is bound, as well as when the event is removed