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

Get prototype inside an eventhandler

本文关键字：获取 原型 程序 事件处理      更新时间：2023-09-26

我正在尝试将原型放入事件处理程序中。

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元素，而不是对象原型。

编辑：

我还希望有机会删除删除处理程序

像这样：

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

在jQuery中，您可以使用$.proxy:

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

还有ECMAScript 5绑定方法：

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

删除侦听器：

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

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);
相关文章：