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，那么你可以将你的代码与你的标记（旧的分离关注事物）分开，就像这样

$(document).ready(function() {

  var box = new BigBox();

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

});

您只需为id为box的所有div添加一次单击处理程序。因为click是一个匿名函数，它获取了它所放置的函数的范围，因此可以访问box实例。

Answer 4

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

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

4 个答案: