Speeding Up Global Event Triggering - J Query

Global event triggering implicates calling all the event handlers bound for a certain event, on all available elements.
It is performed by calling jQuery.trigger() without passing any DOM element as context.It is nearly the same as calling trigger() on all the elements that have one or more bindings to the corresponding event, something like this:

Triggering globally is obviously simpler because you don’t need to know all the elementsthat need to be triggered.
It’s quite useful for certain situations but can also be a slow process at times. Althoughit’s been optimized since jQuery 1.3, it still requires going through all the elements registered to jQuery’s event system. This can cause short (or not so short) hangs every time an event is triggered like this.


One possible solution is to have one or more global objects that will act as event listeners.These elements can be DOM elements or not. All global events will be boundand triggered on one of these elements. Instead of doing something like this:

you’d do something like this:

The syntax seems pretty much the same, but each call to trigger won’t be iterating jQuery’s data registry (aka jQuery.cache).
Even if you decide to use a DOM element, the principle is the same. DOM elements can be more appropriate at times. If, for example, you’re creating a table-related plugin,then it’d make sense to use each <table>element as an event listener.
The problem with DOM elements in many browsers is that they’re the main source ofmemory leaks. Memory leaks occur when there are certain amounts of RAM memory that cannot be freed by the JavaScript engine as the user leaves a page.
You should be much more careful about how you save data into the objects when you use DOM elements. That’s why jQuery provides the data() method.
Still, I’d personally use regular JavaScript objects in most situations. You can add attribute sand functions to them, and the likelihood (and magnitude) of memory leaks will be smaller.


Pros and cons

As stated by the recipe title, this approach is faster. You will be always triggering event son single objects, instead of the n entries on jQuery.cache.
The downside of this approach is that everyone needs to know the event listener object(jQuery.page in the example) in order to bind or trigger one of its known events.
This can be negative if you’re aiming to keep your code encapsulated.*
The concept of encapsulation is highly enforced in object-oriented programming,where this is one of the things you should be very cautious about.This is generally not such a great concern with jQuery programming, because it is notobject oriented and most users don’t get too worried about code encapsulation. Still,it’s worth mentioning.

Making the listeners functional

The listener objects mentioned don’t have to be simple dummy objects with nothing but bind(), unbind(), and trigger() (as far as we’re concerned).
These objects could actually have methods and attributes that would make them much more useful.
The only problem, though, is that if we do something like this:

to access the number attribute, we would be forced to do this:

This is how jQuery works on HTML nodes and anything else.
But don’t give up on me yet! It’s easy to work around this. Let’s make a small plugin:

Now we can create objects that will have all the jQuery methods we need that are related to events, but the scope of the functions we pass to bind(), unbind(), etc., will be the object itself (jQuery.page in our example).
Note that our listener objects won’t have all jQuery methods but just the ones we copied. While you could add some more methods, most of them won’t work. That would require a more complex implementation; we’ll stick to this one, which satisfies our needs for events.
Now that we have this mini plugin, we can do this:

Because you can now access the object from within the handlers, using the this, you do n’t need to pass certain values like the title as arguments to the handler. Instead, you can simply use this.title to access the value:

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

J Query Topics