在事件處理程序中獲取原型

Question

我試圖在事件處理程序中獲取原型。

function Post(){ 
    this.post; 
    this.deleteButton; 
} 
Post.prototype.delete = function(){ 

    var OBJ = this;//this is not the prototype, instead it is the HTML element (deleteButton) 
    $(OBJ.container).remove(); 
} 
Post.prototype.createPost = function(){ 

    var OBJ = this; 
    OBJ.post = document.createElement('div'); 
    OBJ.post.className = 'post' 
    OBJ.deleteButton = document.createElement('div'); 
    OBJ.deleteButton.addEventListener('click', OBJ.delete, false); 
} 

請看上面的註釋部分。刪除處理程序被聲明爲Post的原型方法。我將刪除處理程序分配給刪除按鈕。事情是，this成爲HTML元素，而不是對象的原型。

編輯：

我也希望有機會上的刪除處理

Answer 1

像這樣：

OBJ.deleteButton.addEventListener('click', function() { 
    OBJ.delete(); 
}, false); 

但OBJ不是原型，它指的是實例。

更新：如果你想太刪除，存儲對它的引用：

this.deleteHandler_ = function() { 
    OBJ.delete(); 
}; 
OBJ.deleteButton.addEventListener('click', this.deleteHandler_, false); 

別的地方：

this.deleteButton.removeEventListener('click', this.deleteHandler_); 

Answer 2

Post.prototype.createPost = function(){ 

    var OBJ = this; 
    OBJ.post = document.createElement('div'); 
    OBJ.post.className = 'post' 
    OBJ.deleteButton = document.createElement('div'); 
    OBJ.deleteButton.addEventListener('click', function(){OBJ.delete();}, false); 
} 

如果你使用jQuery，您可以使用代理方法：

OBJ.deleteButton.addEventListener('click',$.proxy(OBJ.delete,OBJ), false); 

Answer 3

在jQuery中您可以使用$.proxy：

var onDelete = $.proxy(OBJ.delete, OBJ); 
OBJ.deleteButton.addEventListener('click', onDelete, false); 

也有ECMAScript的5 bind方法：

var onDelete = OBJ.delete.bind(OBJ); 
OBJ.deleteButton.addEventListener('click', onDelete, false); 

要刪除監聽器：

OBJ.deleteButton.removeEventListener('click', onDelete, false);