У меня возникли проблемы с addEventLisener
к объекту при написании функции-члена для этого объекта.
У меня есть класс с именем Grid
, которая имеет функцию - член create
что создает HTML div
элемент. Теперь я хочу добавить прослушиватель событий к этому div
, который ждет click
. Вот код.
Обратите внимание, что у меня есть другое update
функции-члена для Grid.
Grid.prototype.create = function(index) {
var newnode = document.createElement("div");
newnode.setAttribute("class", "grid");
newnode.setAttribute("id", "grid" + index);
newnode.style.width = this.width + "px";
newnode.style.height = this.height + "px";
document.getElementById("whole").appendChild(newnode);
newnode.addEventListener("click", function() {
if (this.live) {
this.live = false;
} else {
this.live = true;
}
this.update(index);
}, false);
this.update(index);
};
Проблема в том, что this
представляет собой HTML DIV Object
внутри блока addEventListener
, но мне нужно, чтобы он был Grid Object
чтобы можно было вызвать функцию update
.
Как решить эту проблему? Или есть ли другой способ добавить слушателя для объекта всякий раз, когда создается его div
?
Просто используйте переменную, объявленную вне области действия обработчика события
Grid.prototype.create = function(index) {
var grid = this,
newnode = document.createElement("div");
newnode.className = "grid";
newnode.id = "grid" + index;
newnode.style.width = this.width + "px";
newnode.style.height = this.height + "px";
newnode.addEventListener("click", function() {
grid.live = !grid.live;
grid.update(index);
}, false);
document.getElementById("whole").appendChild(newnode);
this.update(index);
};