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

Question

注意：这个问题使用了 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 类的成员。我该怎么做？

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

Answer 1

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

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

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

Answer 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);
}

编辑（响应“如何传递参数”）；

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

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

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

Answer 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); });

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

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

Answer 4

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

$(document).ready(function() {

  var box = new BigBox();

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

});

您只需为所有 ID 为 box 的 div 添加一次单击处理程序。由于单击是一个匿名函数，因此它会获取其所在函数的范围，从而访问框实例。