About Custom Events
It can be difficult at first to understand why you'd want to use custom events,
when the built-in events seem to suit your needs just fine. It turns out that
Instead of focusing on the element that triggers an action, custom events put
the spotlight on the element being acted upon. This brings a bevy of benefits,
- Behaviors of the target element can easily be triggered by different elements using the same code.
- Behaviors can be triggered across multiple, similar, target elements at once.
- The event source does not need to know in detail how to tell the target element
what to do -- it merely needs to tell the target that the event occurred, and
the target can then decide what to do
Why should you care? An example is probably the best way to explain. Suppose
you have a form designer application using Ajax. Users can click on a button
in a dialog box to add an element, like a button, to the interface they are
Without custom events, you could use one of two approaches:
- The code for the interface you are designing (or just the page as a whole)
could register with the button for the event. Problems with this approach
- There are probably multiple buttons in the dialog for different elements
or purposes, so the code would need to register for all of them
- If the dialog box is changed, perhaps to use a drop-down combo box with
a change event instead of a button click event, the event-registering
code will need to be changed.
- The code in the dialog could listen for the click event, and invoke related
methods on the interface.
- There is one main drawback here -- the dialog code will need to know specific
details about the interface (like what method to call and what data to
pass to it).
Examples Without Using Custom Events
Without custom events, you might write some code like this, where the dialog
box code would invoke a specific function in the interface.
With custom events, your code might look more like this:
In the world of custom events, there are three important jQuery methods: $.fn.on, $.fn.trigger, and $.fn.triggerHandler.
In the Events chapter, we saw how to use the on method for working with user
events. We also saw that we could trigger events using a convenience method.
We could have triggered the events using trigger or triggerHandler, but, for
browser events usually the convenience method is easiest.
For this chapter,
it's important to remember two things:
- The $.fn.on method takes an event type and an event handling
function as arguments. Optionally, it can also receive event-related data
as its second argument, pushing the event handling function to the third
argument. Any data that is passed will be available to the event handling
function in the data property of the event object. The event handling function
always receives the event object as its first argument.
- The $.fn.trigger method takes an event type string as its
argument. Optionally, it can also take an array of values. These values will
be passed to the event handling function as individual arguments after the
- Events, like 'click', that are fired using
trigger will bubble up the DOM tree.
- Events triggered using this method will invoke a default action, but
that action can be canceled with e.preventDefault().
- This method operates on all elements in the collection it is invoked upon.
- $.fn.triggerHandler is similar in terms of parameters, but different
in terms of bubbling and default action.
- Events that are fired using
triggerHandler will not bubble up the DOM tree.
- Events triggered using this method will not invoke a default action.
- This method operates only on the first element in the collection it is invoked upon.
The content in this activity and throughout this course is based on material from jQuery Fundamentals, Copyright Rebecca Murphey and used with permission.