设置点击属性，调用 javascript 构造函数中的原型方法

Question

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

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

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

}

然后我尝试制作一些方法的原型，因为页面上可能会有几百张卡片...

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 is not a function" 和 "this.toggleDescription" 未定义错误。

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

Answer 1

添加事件时绑定上下文：

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

设置点击属性，调用 javascript 构造函数中的原型方法

Set click attribute, which calls a prototyped method in javascript constructor

javascript

prototype

click