Добавление eventListener к div, который может ссылаться на объект, который создал div - PullRequest
Новая
       44

Добавление eventListener к div, который может ссылаться на объект, который создал div

0 голосов
/ 17 сентября 2011

У меня есть объект, который считает символы на входе и отображает количество символов в div рядом с входом. Я хочу добавить прослушиватель события click к div, который при нажатии вызывает функцию в объекте, который создал div. Я запутываю себя сейчас, вот код: 

var CharDisplay = function(input, max) {
    this.input = input;
    this.maxChars = max;
    this.direction = "countUp";

    this.div = document.createElement("div");
    this.div.setAttribute("class", "charCounter");
    this.input.parentNode.appendChild(this.div);

    var that = this; // I don't like doing this

    // This function toggles the direction property and tells the extension
    // to update localStorage with the new state of this char counter
    var toggleDirection = function() {
            that.direction = that.direction === "countUp" ? "countDown" : "countUp";    
            that.update();
            chrome.extension.sendRequest({
                    "method" : "updateCharCounter",
                    "id" : that.input.id,
                    "state" : { 
                            "direction" : that.direction,
                            "limit" : that.maxChars
                    }
            });
    }

    this.div.addEventListener("click", toggleDirection);

}

Я хочу, чтобы при нажатии на div счетчик символов переключался между обратным отсчетом («15 символов осталось») и счетом («30 из 45 символов»). Я храню состояние счетчика символов в localStorage, чтобы в любом состоянии, в котором пользователь оставлял счетчик символов, они находили его таким образом, когда возвращаются к нему.

Теперь этот код работает нормально, но я не могу избавиться от ощущения, что есть более элегантный способ сделать это. Мне пришлось добавить var that = this, чтобы заставить его работать, но я всегда чувствую, что это «взлом», и я стараюсь избегать его, если могу.

Можете ли вы придумать лучший способ достижения этого или я должен прекратить попытки исправить то, что не сломано?

1 Ответ

4 голосов
/ 17 сентября 2011

Трюк var that = this довольно распространен в JavaScript.

Альтернативой является привязка функции к заданному контексту: 

function bind(context, fun) {
    return function() {
        fun.call(context, arguments);
    };
}

Эта функция возвращает функцию, которая при вызове, вызовет fun с заданным context.

. Вы можете использовать его так: 

this.div.addEventListener("click", bind(this, toggleDirection));

При этом toggleDirection будет вызываться с this в качестве контекста(this в toggleDirection будет таким же, как в тот момент, когда вы позвонили addEventListener).

См. Также Function.bind.

...