如何在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事件處理程序中引用對象？

回答

相關問題