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

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

我知道如果对象是一个函数,我可以使用闭包(var self = this)

<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>

4 个解决方案

#1

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

将对handle_click的调用绑定到它定义的对象的最简单方法是这样的:

        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:

如果你需要传入参数或想让代码看起来更干净(例如,如果你设置了很多类似的事件处理程序),你可以使用currying技术来实现相同的目的:

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

#2

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.

因此,事件处理程序部分连接正常(我自己测试)但是,正如您的注释所示,您无法访问刚刚定义的对象的“y”属性。

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.

还有其他方法可以做到这一点,但这是有效的。

#3

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

我看到了如何用Jason的最新版本来做到这一点。没有匿名功能的任何方式吗?

#4

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

感谢AddEventListener,我们可以使用处理程序方法直接传递一个对象,您将可以访问其属性:http://www.thecssninja.com/javascript/handleevent

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

希望这能帮助像我这样的人在几年后寻找这个话题!

#1