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

注意：此问题使用jQuery ，但问题与jQuery无关！如何在JavaScript事件处理程序中引用对象？

好了，所以我有这样的对象：

var box = new BigBox();

该目的的方法命名Serialize()：

box.AddToPage();

这里是方法AddToPage()：

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

的问题以上是this.OnClick()（这显然不起作用）。我需要onclick处理程序来调用BigBox类的成员。我怎样才能做到这一点？

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

来源

2010-04-22 Nathan Osman

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

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

EDIT：

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

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

来源

2010-04-22 21:25:12 Matt

啊。无论如何，考虑到其他代码的结构，我认为这可能是更好的选择。谢谢:) – 2010-04-22 21:26:43

这将无法正常工作。 – SLaks 2010-04-22 21:26:49

这根本没有帮助。 – 2010-04-22 21:26:49

如果您正在使用jQuery，那么你就可以像独立于您的标记代码（关注事情的老分离 - ）这

$(document).ready(function() { 

    var box = new BigBox(); 

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

});

您只需要添加一次点击处理程序为所有具有框的ID的div。而且由于点击是一个匿名函数，因此它获得了放置函数的范围，因此可以访问该框实例。

来源

2010-04-22 21:29:00

对于确保'this'涉及'BigBox'的一个实例（人们只是不读这个问题？），他没有做任何事情来解决他的问题。 – 2010-04-22 21:33:00

公平点，一旦我开始回复，我忘了包括这一点。 – 2010-04-22 21:40:17

不错，明确的修复。 :-) – 2010-04-22 21:54:29

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

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

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

来源

2010-04-22 21:29:39 SLaks

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

来源

2010-04-22 21:34:47 bobince

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

回答

相关问题