Как добавить прослушиватель событий для объекта?

Question

Как добавить прослушиватель событий для объекта?

0

У меня возникли проблемы с 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?

zkytony 04 май 2014, в 23:50

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

adeneo · Accepted Answer · 2014-05-04T18-05-00.000Z

Просто используйте переменную, объявленную вне области действия обработчика события

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