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.
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.
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:
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.