I know I could do this with closures (var self = this) if object was a function:

<a href="#" id="x">click here</a>

<script type="text/javascript">
    var object = {
        y : 1,

        handle_click : function (e) {
            alert('handling click');
    
            //want to access y here
    
            return false;
        },

        load : function () {
            document.getElementById('x').onclick = this.handle_click;
        }
    };

    object.load();
</script>

I know I could do this with closures (var self = this) if object was a function:

<a href="#" id="x">click here</a>

<script type="text/javascript">
    var object = {
        y : 1,

        handle_click : function (e) {
            alert('handling click');
    
            //want to access y here
    
            return false;
        },

        load : function () {
            document.getElementById('x').onclick = this.handle_click;
        }
    };

    object.load();
</script>

• javascript
• event-handling
• dom-events

4 Answers 4

The simplest way to bind the call to handle_click to the object it is defined in would be something like this:

        var self=this;
        document.getElementById('x').onclick = 
           function(e) { return self.handle_click(e) };

If you need to pass in parameters or want to make the code look cleaner (for instance, if you're setting up a lot of similar event handlers), you could use a currying technique to achieve the same:

bind : function(fn)
{
   var self = this;
   // copy arguments into local array
   var args = Array.prototype.slice.call(arguments, 0); 
   // returned function replaces first argument with event arg,
   // calls fn with posite arguments
   return function(e) { args[0] = e; return fn.apply(self, args); };
},

...

        document.getElementById('x').onclick = this.bind(this.handle_click, 
           "this parameter is passed to handle_click()",
           "as is this one");

So, the event handler part wires up just fine (I tested it myself) but, as your ment indicates, you have no access to the "y" property of the object you just defined.

This works:

var object = { 
  y : 1, 
  handle_click : function (e) {
    alert('handling click');

    //want to access y here 
    alert(this.y); 

    return false; 
  }, 
  load : function () { 
    var that = this; 
    document.getElementById('x').onclick = function(e) {
      that.handle_click(e); // pass-through the event object
    }; 
  } 
}; 
object.load();

There are other ways of doing this too, but this works.

I see how to do it with Jason's latest one. Any way to do it without the anonymous function?

We can directly pass an object with a handler method thanks to AddEventListener, and you will have access to its attributes: http://www.thecssninja./javascript/handleevent

Hope this will help those who, like me, will look for this topic some years after!