可以在javascript对象文字访问本身中定义事件处理程序吗？

Question

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>

Answer 1

So, the event handler part wires up just fine (I tested it myself) but, as your comment 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.

Answer 2

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 composite 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");

Answer 3

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

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

Answer 4

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