Creating Your Own Events - J Query

Problem
You want to provide certain behaviors to an element when it’s bound to an event.

Solution

Use jQuery.event.special to do this. This feature requires an object with, at least, a function that will be called each time your event is bound for the time on each element and another function to clean up what you did in the first place.
The syntax looks something like this:

After you add your event behavior, you can do something like this:

After this, your setup() function will be called.

Discussion

Handling every binding to your event

As explained, your setup() function will be called only when adding the first handler.
This is enough if the logic you’re encapsulating on this event doesn’t require some operations to be run each time a new binding is performed.
This option is provided by jQuery, but the approach has changed since jQuery 1.3.3.
If you’re using an older version, then you just need to use jQuery.event.specialAll instead of jQuery.event.special. It will accept the same kind of object, and your callbacks will receive the same arguments. The only difference is that returning false won’t bring any change.
As of jQuery 1.3.3, jQuery.event.specialAll is gone. To intercept all bindings for an
event, you need to include an add() (and optionally remove()) function in your
jQuery.event.special namespace. The functions will receive the handler that is about to be bound, and can optionally return a new handler function to be used instead.

A real-world example

Let’s make sure this is clear by writing a simple example; I’ll use the 1.3.3+ notation.
Let’s suppose you want to have an event triggered when an element is selected (clicked)and it isn’t disabled. We’ll assume that the item is disabled when it has the CSS class disabled.
Here’s a way of doing that:

As you can see, we provide our own handler for selected. Within the handler, we used triggerHandler() instead of trigger() because we don’t need event bubbling, and there’s no default action to prevent, so we save some needless processing.

Existing uses for this feature

jQuery.event.special is a great way of adding new behaviors without polluting the jQuery namespace.

It doesn’t suit any situation, but it usually comes in handy when you need a custom event that is based on another one (click in our example). It’s also useful if you have a plugin that simply binds events or simulates them; then you can “mask” that plugin as a regular event.

jQuery’s core uses jQuery .event. special to handle events bound to the document. ready event. Actually, they’re stored as regular event handlers, but the first time you bind to this event, you’re actually activating the (hacky) detection code.
It is also used to transparently handle mouse enter/mouse leave events (those used by hover()). All the DOM traversal operations needed to achieve this are nicely hidden with in the setup() handlers.
There are also plugins that take advantage of jQuery.event.special. Some of these are as follows:

mousewheel

Provides support for mouse wheel changes.†

drag drop

Drag and drop support masked as simple events.‡

focusin,focusout

This snippet (not an actual plugin) originally written by Jörn Zaefferer was later added via plugins to achieve event delegation of focus and blur events.
Checking these plugins can be a good start if you’re planning on adding new events to jQuery.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics