javascript - javascript 对象字面量中定义的事件处理程序可以访问自身吗？

Question

我知道如果对象是一个函数，我可以用闭包（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>

Answer 1

因此，事件处理程序部分连接得很好（我自己测试过），但是，正如您的评论所示，您无法访问刚刚定义的对象的“y”属性。

这有效：

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

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

Answer 2

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

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

如果你需要传入参数或者想让代码看起来更简洁（例如，如果你设置了很多类似的事件处理程序），你可以使用柯里化技术来实现同样的效果：

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

我知道如何使用 Jason 的最新版本来做到这一点。没有匿名函数有什么办法吗？

Answer 4

借助 AddEventListener，我们可以使用处理程序方法直接传递对象，并且您将可以访问其属性： http ://www.thecssninja.com/javascript/handleevent

希望这会帮助那些像我一样在几年后寻找这个话题的人！