Question

I know that having the value of this being changed to the element receiving the event in event handling functions is pretty useful. However, I’d like to make my functions always be called in my application context, and not in an element context. This way, I can use them as event handlers and in other ways such as in setTimeout calls.

So, code like this:

window.app = (function () {
    var that = {
        millerTime: function () {},
        changeEl: function (el) {
            el = el || this;
            // rest of code...
            that.millerTime();
        }
    };
    return that;
}());

could just be like this:

window.app = (function () {
    return {
        millerTime: function () {},
        changeEl: function (el) {
            // rest of code...
            this.millerTime();
        }
    };
}());

The first way just looks confusing to me. Is there a good easy way to pass the element receiving the event as the first argument (preferably a jQuery-wrapped element) to my event handling function and call within the context of app? Let’s say I bind a bunch of event handlers using jQuery. I don’t want to have to include anonymous functions all the time:

$('body').on('click', function (event) {
    app.changeEl.call(app, $(this), event);  // would be nice to get event too
});

I need a single function that will take care of this all for me. At this point I feel like there’s no getting around passing an anonymous function, but I just want to see if someone might have a solution.

My attempt at it:

function overrideContext (event, fn) {
   if (!(this instanceof HTMLElement) ||
         typeof event === 'undefined'
   ) {
       return overrideContext;
   }

   // at this point we know jQuery called this function // ??
   var el = $(this);

   fn.call(app, el, event);
}

$('body').on('click', overrideContext(undefined, app.changeEl));

Using Function.prototype.bind (which I am new to), I still can’t get the element:

window.app = (function () {
    return {
         millerTime: function () {},
         changeEl: function (el) {
            // rest of code...
            console.log(this); // app
            this.millerTime();
         }
    };
}());

function overrideContext (evt, fn) {
    var el = $(this); // $(Window)
    console.log(arguments); // [undefined, app.changeEl, p.Event] 
    fn.call(app, el, event);
}

$('body').on('click', overrideContext.bind(null, undefined, app.changeEl));

Using $('body').on('click', overrideContext.bind(app.changeEl)); instead, this points to my app.changeEl function and my arguments length is 1 and contains only p.Event. I still can’t get the element in either instance.

Answer 1

Defining a function like this should give you what you want:

function wrap(func) {
  // Return the function which is passed to `on()`, which does the hard work.
  return function () {
    // This gets called when the event is fired. Call the handler
    // specified, with it's context set to `window.app`, and pass
    // the jQuery element (`$(this)`) as it's first parameter.
    func.call(window.app, $(this) /*, other parameters (e?)*/);
  }
}

You’d then use it like so;

$('body').on('click', wrap(app.changeEl));

For more info, see Function.call()

---

^{Additionally, I’d like to recommend against this approach. Well versed JavaScript programmers expect the context to change in timeouts and event handlers. Taking this fundamental away from them is like me dropping you in the Sahara with no compass.}