Event triggered by function in JS?

Question

Is it possible to associate a function with another function when called? For example, it would look something like this:

function a(){...} function b(){...} b.bind("onInvoke","a"); 

Therefore, when b is called, a is automatically called.

---

EDIT: OK OK, to clarify, this is not a chain issue. The idea is to find an elegant way to bind an event. Follow the normal "non-forest" method with calling a regular function callback:

 function handler(){...} function caller1(){handler(); ...} function caller2(){handler(); ...} function caller2(){handler(); ...} // More callers all over your website everywhere else 

Does this work correctly? But what if I have a call all over the place? It’s hard to organize or change things.

Now look for an excellent solution! (If one exists)

 function handler(){...} // Caller make no reference to handler on creation function caller1(){...} function caller2(){...} function caller3(){...} // Caller function are still all over the place, all over your website // Event handler registered later in one location here, doesn't matter where they are phsically caller1.bind("onInvoke",handler); caller2.bind("onInvoke",handler); caller3.bind("onInvoke",handler); 

Just like your usual event logging in HTML format is jQuery. You do not write onClick on every image that the user can click (which is everywhere), it would be too difficult to organize this! You just write one simple

  $("img").bind("onClick",click_handler); 

for the whole site. This is the craziness of what I'm looking for except for the JS features.

I hope this clarifies the situation.

---

EDIT 2: need to work with IE7 !!! JavaScript 1.8.5 is great, that's all, but nothing supports it right now.

Answer 1

There are various solutions depending on how many architects you want. A simple and flexible approach is to create a chain function function:

 function chain() { var args = arguments; return function() { // loop through arguments and invoke all functions for(var i = 0; i < args.length; i++) { if(typeof args[i] == "function") args[i](); } } } 

What this does is return a new function that will consistently call the provided functions. Use it like this:

 var myChain = chain(b, a); myChain(); 

Answer 2

You can do this with an aspect-oriented approach. Here is a simple example:

Attach a function call () to function b ():

 var _b = b; b = function(){ _b(); a(); } 

Now call b ():

 b(); 

See here: http://jsfiddle.net/eZ9wJ/

Answer 3

You can use the callback:

 function a(){ // some code here b(); } function b(){...} 

Or the observer pattern http://www.michaelhamrah.com/blog/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

Answer 4

JavaScript 1.8.5 / ECMAScript 5 does define a binding function , but it does not do what you described above; it allows you to specify what the this context will have when it is called, and if desired, allows you to hard-code specific curry arguments.