Dynamic event building in JavaScript

Question

I'd like to create an event for each function in a script, then inject the event trigger into the end of the function.

This way I can see exactly when each function has completed and use the events like hooks for other functions

If I can do it dynamically, I can add as many new functions as I like without having to create and append these events.

Here's a basic example of what I'm trying to do, this won't actually work, but it gives you an idea. I have been using jQuery, but I'll accept any JavaScript framework at all, and any method.

var obj = {};

(function()
{
    this.init = function()
    {
        // loop through every function
        $.each(this, function(k, v)
        {
            // create an event for every function
            $('body').bind(v, function()
            {
                 console.log('Event: ' + v + ' Finished');
            });

            // Add a event trigger into each specific function in the loop
            this[v].call($('body').trigger(v));
        });
    }
    
    this.another_function = function()
    {
        // do something
    }

    this.some_function = function()
    {
         /do something
    }

}).apply(obj);

obj.init();

(edit) The script itself basically renders a Calendar, but there are a lot of callbacks, ajax requests, buttons. etc... If I could tie each feature down to an event, it would make my life easier when extending it, adding new features etc...

can you give more details on what you have as an input, with some examples of your functions/handlers ? — vittore
– vittore, Commented Oct 3, 2012 at 16:12
I added a few more details in my edit, but theres not much more than that. Its just an idea I had that might work for me if possible. — outrunthewolf
– outrunthewolf, Commented Oct 3, 2012 at 16:18

vittore · Accepted Answer · 2012-10-03 16:26:03Z

1

Loop through every function, replace it with new one, which calls original function on the same object and triggers event on body.

var obj = { };

(function()
{
    this.init = function()
    {
        var self = this;
        foreach(var name in this) {
            if (typeof k !== 'Function') continue;
            if (name ==='init') continue;

            var original = this[name];

            var newFunc = function() {
                original.apply(self, arguments);
                $('body').trigger(name);
            }

            this[name] = newFunc;
        } 
    }

this.another_function = function()
    {
        // do something
    }

this.some_function = function()
    {
         /do something
    }

}).apply(obj);

obj.init();

edited Oct 3, 2012 at 16:26

answered Oct 3, 2012 at 16:16

vittore

17.6k6 gold badges46 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

outrunthewolf Over a year ago

Yes, I see where your coming from here, but I wanted to not only invoke the events dynamically, but trigger each event automatically when each function completed its task.

vittore Over a year ago

Oh it seems i get what you want to achive here. see changes

Collectives™ on Stack Overflow

Dynamic event building in JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related