Установить атрибут click, который вызывает прототипированный метод в конструкторе javascript

Question

* Хотя я вижу сходство, вопрос, на который ссылается как дубликат, касается привязки событий кликов к объектам в объектах посредством обратного вызова. Мой вопрос касается привязки событий click к свойствам объекта. Поэтому, хотя я был подобным, мне не удалось применить информацию в этом вопросе к моему вопросу; однако я смог применить полученную здесь информацию для решения моей проблемы. И, наконец, поскольку часто существует несколько способов решения подобной проблемы, я думаю, что сообщество может извлечь выгоду, сохранив оба вопроса, поскольку два совершенно разных решения предоставляются по двум одинаковым, но различным вопросам.

У меня есть объект карты с contstructor, который выглядит примерно так ...

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 

}; 

проблема:

я не могу показаться, чтобы установить получить 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)); 
}