JavaScript context in inner event function

Question

I am trying to access the properties of the MainObj inside the onclick of an elem. Is there a better way to design it so the reference wont be to MainObj.config.url, but to something like this.config.url?

Sample code:

var MainObj = {
      config: { url: 'http://www.example.com/'},
      func: function()
      {
          elem.onclick = function() {
           var url_pre = MainObj.config.url+this.getAttribute('href');
                    
           window.open(url_pre, '_new');
          };
      }

}

hereandnow78 · Accepted Answer · 2013-01-16 08:27:35Z

4

'this' inside the object always refers to itself (the object). just save the context into a variable and use it. the variable is often called '_this', 'self' or '_self' (here i use _self):

var MainObj = {
  config: { url: 'http://www.mysite.com/'},
  func: function()
  {
      var _self = this;
       elem.onclick = function() {
       var url_pre = _self.config.url+this.getAttribute('href');

       window.open(url_pre, '_new');
      };
  }
}

answered Jan 16, 2013 at 8:27

hereandnow78

14.5k8 gold badges46 silver badges49 bronze badges

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

3 Comments

David Hellsing Over a year ago

Just make sure you don’t do something like MainObj.func.call('foo')

Elias Van Ootegem Over a year ago

@David: or worse still: var someFunc = MainObj.func; someFunc(); :), this will probably do for the OP, but it's not the safest way to go

user235410 Over a year ago

I am not sure this is the best answer but since it requires little change for my code i used it and selecting it.

Minko Gechev · Accepted Answer · 2013-01-16 08:27:28Z

3

You can use the Module pattern:

var MainObj = (function () {
      var config = { url: 'http://www.mysite.com/'};
      return {
         func: function() {
             elem.onclick = function() {
                 var url_pre = config.url+this.getAttribute('href');
                 window.open(url_pre, '_new');
             };
          }
      };
}());

First we define the config object in the local function scope. After that we return an object literal in the return statement. This object contains the func function which later can be invoked like: MainObj.func.

answered Jan 16, 2013 at 8:27

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

2 Comments

hereandnow78 Over a year ago

you are right with your answer, but i dont see how your answer is an answer to THIS question

Minko Gechev Over a year ago

Now we don't have MainObj.config.url, forgot to fix it. Thanks for your comment.

Elias Van Ootegem · Accepted Answer · 2013-01-16 08:58:40Z

There is, most certainly, a better way... but I must say: binding an event handler in a method is -and I'm sorry for this- a terrible idea.
You might want to check MDN, about what it has to say about the this keyword, because this has confused and tripped up many a man. In your snippet, for example, this is used correctly: it'll reference elem. Having said that, this is what you could do:

var MainObj = (function()
{
    var that = {config: { url: 'http://www.google.com/'}};//create closure var, which can be referenced whenever you need it
    that.func = function()
    {
        elem.onclick = function(e)
        {
            e = e || window.event;
            window.open(that.config.url + this.getAttribute('href'));
        };
    };
    return that;//expose
}());

But as I said, binding an event handler inside a method is just not the way to go:

MainObj.func();
MainObj.func();//shouldn't be possible, but it is

Why not, simply do this:

var MainObj = (function()
{
    var that = {config: { url: 'http://www.google.com/'}};
    that.handler = function(e)
    {
        e = e || window.event;
        window.open(that.config.url + this.getAttribute('href'));
    };
    that.init = function(elem)
    {//pass elem as argument
        elem.onclick = that.handler;
        delete that.init;//don't init twice
        delete that.handler;//doesn't delete the function, but the reference too it
    };
    return that;//expose
}());
MainObj.init(document.body);

Even so, this is not the way I'd write this code at all, but then I do tend to over-complicate things every now and then. But do look into how the call context is determined in JS, and how closures, object references and GC works, too... it's worth the effort.

Update:
As requested by the OP - an alternative approach

(function()
{
    'use strict';
    var config = {url: 'http://www.google.com/'},
    handlers = {load: function(e)
        {
           document.getElementById('container').addEventListener('click',handlers.click,false);
        },
        click: function(e)
        {
            e = e || window.event;
            var target = e.target || e.srcElement;
            //which element has been clicked?
            if (target.tagName.toLowerCase() === 'a')
            {
                window.open(config.url + target.getAttribute('href'));
                if (e.preventDefault)
                {
                    e.preventDefault();
                    e.stopPropagation();
                }
                e.returnValue = false;
                e.cancelBubble = true;
                return false;//overkill
            }
            switch(target.id)
            {
                case 'foo':
                    //handle click for #foo element
                return;
                case 'bar': //handle bar
                return;
                default:
                   if (target.className.indexOf('clickClass') === -1)
                   {
                       return;
                   }
            }
            //treat elements with class clickClass here
        }
    };
    document.addEventListener('load',handlers.load,false);//<-- ~= init
}());

This is just as an example, and it's far from finished. Things like the preventDefault calls, I tend to avoid (for X-browser compatibility and ease of use, I augment the Event.prototype).
I'm not going to post a ton of links to my own questions, but have a look at my profile, and check the JavaScript questions. There are a couple of examples that might be of interest to you (including one on how to augment the Event.prototype in a X-browser context)

Thanks, how will you write the event handler method binding?
@user235410: Well, I use IIFE's all over, in combination with the module pattern... and I usually delegate all events. It would look like overkill in this case, but it just makes for more manageable code in the long run... In my experience, it can boost performance, too. I'll add the code, but I don't know what your needs are, so it could very well be that it simply doesn't meet your needs at all

Collectives™ on Stack Overflow

JavaScript context in inner event function

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related