Letting Event Handlers Provide Needed Data - J Query

You need to allow other plugins (or just simple jQuery code) to chime in and modify certain variables before you perform the requested action.


Use events to notify other scripts about the action that is about to be carried out.
It is possible to get data that is gathered from the actioned event handlers.
If none is provided, you could then use some default option of your choice.
You’ll see how to do this according to what jQuery version you are using.


How can we do this with jQuery 1.3+?

Since jQuery 1.3, with the addition of jQuery.Event, this can be achieved in a nicer way.
The old way still works for triggerHandler() but not for jQuery.trigger().
For the code we’ll see now, we will need to create a jQuery.Event:

Now, to call the handlers and retrieve the value, we’ll pass the event object to trigger() and then fetch the data from the event object:

As I said at the beginning, this doesn’t work nicely when many handlers are bound and is, in general terms, a little unreliable and fragile.
So, how can we communicate event handlers and the function triggering the event?
The answer is, through the event object that we’re passing.
The jQuery.Event object passed to trigger() will be the same that is received by each handler as its first argument.
This means that we can do this:

This example doesn’t differ much from simply accessing e.result, but what about multiple event handlers that operate on the same event object?

We now have a way of allowing any number of event handlers to provide needed information for a function to run. Needless to say, you can call trigger() several times,passing the same event object.
As said before, it’d be wise to preset the event object with default values (if applicable).Your code should n’t rely on the fact that others did subscribe to a certain event.
If no default value can be used, then you can always abort the call or throw an error.

How this was achieved before jQuery 1.3

Older versions of jQuery only allowed the users to get a single value, which would be returned when calling jQuery.trigger() and/or triggerHandler().
It looked something like this:

This was OK until you had more than one event handler returning data. At that point it was a matter of “who comes last” to decide which one’s data would be returned.

Allowing event handlers to prevent actions

This is really a specialization of what we just saw. Event objects, by design, have a method called preventDefault(). This method is used on native events to abort commonactions like clicks on links, but it has no real use on custom events.
We could take advantage of this and use this method to allow other scripts to prevent actions that are about to be performed.
I’ll now show you an example of an action. I’ll use the mini plugin introduced on Recipe (Speeding Up Global Event Triggering), but that is certainly not a requirement to use this:

Now suppose we want to allow an external script to abort certain requests when needed. We need to modify remote.request like this:

e.isDefaultPrevented() will return whether e.preventDefault() was ever called on this object.
Any external script can now do something like this:

Returning false (within the function) would have nearly the same effect as calling e.preventDefault(). It will also stop the event propagation, which could be desirable.Needless to say, in a situation like this, we could use what we learned before to allow the URL (or post data if added) to be modified by handlers.

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

J Query Topics