(^86) ❘ CHAPTER 3 EVENTS
The new custom event handler creates the appendFile.finder event on
elements with class
names finderDirectory or finderFile. The custom event is namespaced to finder so that the
appendFile event name can be applied to other things, if necessary.
And then when a dblclick event is dispatched on the fi le management window, and the additional
fi les are appended to the document, for each of those fi les or folders, the appendFile event is fi red
with a call to trigger().
$('div#finderAdditionalFiles > div.finderFile').each(
function()
{
var file = $(this).clone();
$('div#finderFiles').append(file);
file.trigger(
'appendFile.finder', {
path : file.data('path')
}
);
}
);
When the appendFile.finder event is fi red off, you can pass data into the event by passing an object
literal to the second argument. This data is then passed back to the event handler in its second
argument. The contents of the second argument and this are printed to the JavaScript console so
that you can observe that custom events work similarly to native ones and allow custom data to be
passed back to the handler.
names finderDirectory or finderFile. The custom event is namespaced to finder so that the
appendFile event name can be applied to other things, if necessary.
And then when a dblclick event is dispatched on the fi le management window, and the additional
fi les are appended to the document, for each of those fi les or folders, the appendFile event is fi red
with a call to trigger().
$('div#finderAdditionalFiles > div.finderFile').each(
function()
{
var file = $(this).clone();
$('div#finderFiles').append(file);
file.trigger(
'appendFile.finder', {
path : file.data('path')
}
);
}
);
When the appendFile.finder event is fi red off, you can pass data into the event by passing an object
literal to the second argument. This data is then passed back to the event handler in its second
argument. The contents of the second argument and this are printed to the JavaScript console so
that you can observe that custom events work similarly to native ones and allow custom data to be
passed back to the handler.
Summary
jQuery events are a fl exible and simple way of using JavaScript events. jQuery’s APIs provide both
wrapper methods for common JavaScript events, as well as more detailed APIs in the on(), off(),
and trigger() methods.If you want to use a browser event that jQuery does not provide a wrapper for, you must use on(),
off(), or trigger() to use one of those events, for example, the HTML5 drag-and-drop API (which
is discussed in Chapter 11, “HTML5 Drag and Drop”).If you provide a selector to the on() method, you can create persistent or live event handlers. It
becomes possible to apply event handlers for elements that don’t exist yet. It also becomes possible
to greatly reduce the number of event handlers applied within an application because with live or
persistent events, events can be applied to just a single element further up the DOM tree.Event handlers can be namespaced by adding a dot and name to the name of the event. Events
can be given multiple names, if you like, and this works similarly to how class names work in
CSS selectors.