javascript - 设置click属性，该属性调用javascript构造函数中的原型(prototype)方法

Question

*虽然我可以看到相似之处，但作为重复项引用的问题是关于通过回调将单击事件绑定(bind)到对象内的对象。我的问题是关于将单击事件绑定(bind)到对象的属性。因此，虽然类似，但我无法将该问题中的信息应用到我的问题中；但是，我能够应用此处收到的信息来解决我的问题。最后，由于通常有多种方法可以解决类似的问题，我认为社区可以通过保留这两个问题而受益，因为为两个相似但不同的问题提供了两种截然不同的解决方案。

我有一个带有构造函数的卡片对象，看起来像这样......

function cardObj(params){
    this.id = params.id;        

    this.card = document.createElement('div');
    this.itemBody = document.createElement('div');
    this.footerContainer = document.createElement('div');

    this.card.appendChild(this.itemBody);
    this.card.appendChild(this.footerContainer);

}

然后我尝试对一些方法进行原型(prototype)设计，因为页面上可能会有数百张卡片...

cardObj.prototype.toggleDescription = function (){
    // do some stuff

};

问题:

我似乎无法设置 get onclick 来处理任何对象属性。我尝试过类似的方法...

(在cardObj构造函数内)

this.footerContainer.click = function(){this.toggleDescription();};

而且我也尝试过(在我的程序主程序功能中)...

cardArr[x] = new cardObj(params);
parentDiv.appendChild(cardArr[x].card);
cardArr[x].footerContainer.click = function(){this.toggleDescription();};

我收到各种“toggleDescription 不是函数”和“this.toggleDescription”未定义错误。

如果可能的话，我想以某种方式在对象构造函数中设置 click 属性，因为我想保持这个完全模块化，这样我就可以，例如，简单地将我的 cardObj.js 文件复制并粘贴到另一个程序中并具有这一切都对我有用，只需将一些参数传递给构造函数即可。这可能吗？我哪里错了？

Answer 1

添加事件时绑定(bind)上下文:

function cardObj(params){
    this.id = params.id;        

    this.card = document.createElement('div');
    this.itemBody = document.createElement('div');
    this.footerContainer = document.createElement('div');

    this.card.appendChild(this.itemBody);
    this.card.appendChild(this.footerContainer);

    this.footerContainer.addEventListener('click', this.toggleDescription.bind(this));
}