如何在 JavaScript 事件处理程序中引用对象？答案

【问题标题】：How to refer to object in JavaScript event handler?如何在 JavaScript 事件处理程序中引用对象？
【发布时间】：2010-04-22 21:23:21
【问题描述】：

注意：本题使用jQuery但本题与jQuery无关！

好的，我有这个对象：

var box = new BigBox();

这个对象有一个名为Serialize()的方法：

box.AddToPage();

这里是AddToPage()的方法：

function AddToPage()
{
    $('#some_item').html("<div id='box' onclick='this.OnClick()'></div>");
}

上面的问题是this.OnClick()（显然不起作用）。我需要onclick 处理程序来调用BigBox 类的成员。我该怎么做？

对象如何在事件处理程序中引用自己？

【问题讨论】：

标签： javascript html object self-reference

【解决方案1】：

您应该使用 jQuery 附加处理程序：

function AddToPage()
{
    var self = this;
    $('#some_item').empty().append(
        $("<div id='box'></div>")
            .click(function() { self.OnClick(someParameter); })
    );
}

为了强制在对象的上下文中调用事件处理程序（并传递参数），您需要添加一个正确调用处理程序的匿名函数。否则，处理程序中的 this 关键字将引用 DOM 元素。

【讨论】：

【解决方案2】：

不要使用内联代码添加事件处理程序。

function AddToPage()
{
    $('#some_item').html("<div id='box'></div>");
    $('#box').click(this.OnClick);
}

编辑：

另一种方式（避免额外的选择）：

function AddToPage()
{
    var div = $('<div id="box"></div>'); // probably don't need ID anymore..
    div.click(this.OnClick);

    $('#some_item').append(div);
}

EDIT（回应“如何传递参数”）；

我不确定你想传递什么参数，但是..

function AddToPage()
{
    var self = this, div = $('<div></div>');
    div.click(function (eventObj) {
        self.OnClick(eventObj, your, params, here);
    });

    $('#some_item').append(div);
}

【讨论】：

啊。考虑到其余代码的结构，我发现这可能是一个更好的选择。谢谢:)
哦。还有，如何将参数传递给OnClick 处理程序？
@George: OnClick 不会在上下文中被调用。看我的回答。
您的编辑没有帮助。 div.click(this.OnClick); 中没有任何内容可以保留 this（即使 this 在您调用它时是正确的，这还远不能确定）。
@Matt & @tvanfosson：与参数无关。它与this 的含义有关在对处理程序的调用中。 @tvanfosson：关于 “你可能想实际尝试一下” 实际上，我非常了解这一点：blog.niftysnippets.org/2008/03/mythical-methods.html blog.niftysnippets.org/2008/04/you-must-remember-this.html

【解决方案3】：

在 jQuery 1.4 中，您可以使用代理。

BigBox.prototype.AddToPage= function () {
    var div= $('<div>', {id: box});
    div.click(jQuery.proxy(this, 'OnClick');
    div.appendTo('#some_item');
}

您也可以使用手动关闭：

    var that= this;
    div.click(function(event) { that.OnClick(event); });

或者，最简单的是，但需要一些 help 在尚不支持它的浏览器中实现（这是 ECMAScript 第五版功能）：

    div.click(this.OnClick.bind(this));

【讨论】：

【解决方案4】：

如果您使用的是 jQuery，那么您可以像这样将代码与标记（旧的关注点分离）分开

$(document).ready(function() {

  var box = new BigBox();

  $('#box').click(function() {
    box.serialize();
  });

});

您只需为所有 id 为 box 的 div 添加一次点击处理程序。并且因为点击是一个匿名函数，它获取了它所在函数的作用域，从而访问了盒子实例。

【讨论】：

这无助于解决他关于确保this 与BigBox 实例相关的问题（人们只是没有阅读这个问题吗？）。
公平点，我一开始回复就忘记了。