Watch the JS event when you know only the PART of the event name?

Question

I have inherited some JS (which I cannot change) that fires a bunch of events:

jQuery(document).trigger('section:' + section); // where "section" changes dynamically 

And I want to watch ALL of these events and analyze the value for section and do something else depending on its contents.

If this has not changed, I could do this:

 jQuery(document).on('section:top', doStuff ); 

But how can I observe an event if I know only the first part of this event name?

Answer 1

Here is what I did.

This is a combination of the Juan Mendes solution and using the prototype library method

Initially, there was a function that ran this code:

 myObject.adjustSection(section) { jQuery(document).trigger('section:' + section); } // I couldn't edit this function 

So, I expanded the function with the wrap prototype since my project used the prototype as well as jQuery.

 // My custom function wrapper // extend adjustSection to include new event trigger myObject.prototype.adjustSection = myObject.prototype.adjustSection.wrap( function(parentFunction, section) { // call original function parentFunction(section); // fire event w/section info jQuery(document).trigger({ type: 'adjustSection', section: section }); } ); 

Then it fires the source file, but also fires my custom event, which includes the section information.

Now I can do this to watch this event and get the section type:

 jQuery(document).on('adjustSection', function(event) { event.section; // contains the section I need }); 

Of course, this means that I have to use both prototype and jquery in the same area, which is not the best in the world. But it worked.

Answer 2

You cannot listen to all events in the style of $().on('section:*') , unfortunately. If you can change the code, I would do the following:

 jQuery(document).trigger({ type: 'section', section: section }); 

Then you listen to it and don't have to understand anything.

 jQuery(document).on('section', function(e){ if (e.section === 'top') { // Something happened to the top section } }); 

If you want to minimize your code changes, leave the old event there, so the existing code will not be affected.

Another approach is to use event namespaces.

 jQuery(document).trigger('section.' + section); jQuery(document).on('section', function(e){ if (e.namespace === 'top') { // Something happened to the top section } }); 

I, however, prefer the first approach, because event namespaces are most often used for another purpose: to be able to delete events without being forced to refer to the handler itself. See http://css-tricks.com/namespaced-events-jquery/ and http://ejohn.org/apps/workshop/adv-talk/#13 . I prefer to use styles that other developers are used to if they do the job.

Answer 3

I'm really not sure about your use case, but you can overwrite the $.fn.trigger method:

 (function ($) { var oldTrigger = $.fn.trigger; $.fn.trigger = function () { if (arguments[0].match(/^section:/)) { doStuff(arguments[0].split(':')[1]); } return oldTrigger.apply(this, arguments); }; })(jQuery); var section = "top"; jQuery(document).trigger('section:' + section); function doStuff(section) { alert(section); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>