在事件处理程序中获取原型

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