Как достучаться до свойства объекта Javascript из его же функции при запуске её через EventListener или зачем this === e.target?

Question

800147 @800147

Как достучаться до свойства объекта Javascript из его же функции при запуске её через EventListener или зачем this === e.target?

Искал ответ, но сформулировать запрос трудновато. В общем, заезжанная проблема с this в js:

<html>
    <head>
        <title>Deep Thought</title>
        <script type="text/javascript">
var deepThought = {
    answer: 42,
    alertAnswer: function (e) {
        //need 42!!
    }
}
onload = function() {
    document.getElementById("button").addEventListener('click', deepThought.alertAnswer);
}
        </script>
    </head>
    <body>
        <button id="button">
            alert the Answer to the Ultimate Question of Life,
            The Universe, and Everything
        </button>
    </body>
</html>

Если просто запустить deepThought.alertAnswer(); а внутри функции прописать alert(this.answer); то всё заработает, но нужно запускать функцию через событие, а в этом случае this === e.target. Спасите мой объектно-ориентированный мозг. Альтернативные структуры приветствуются, но в итоге функция alertAnswer будет выведена в отдельный объект, а куча разных deepThought'ов с разными answer будут его наследовать. В общем, хардкод не предлагать.

Вопрос задан более трёх лет назад
3209 просмотров

Комментировать

Подписаться 3 Оценить Комментировать

Answer 1 · 2014-10-13 02:05:13

нужно запускать функцию через событие, а в этом случае this === e.target

Категорически нет. При использовании addEventListener this ссылается на узел, в котором зарегистрирован обработчик.
Например, регистрируем так:

document.addEventListener('click', function (e) {
	console.log(e.target); // Где кликнули
	console.log(this); // Всегда document
}, false);

Как привязать объект активации (он же this) к строго определённому объекту (и даже не HTML-элементу)? Вам стоит почитать про bind (а также call и apply).

Итого примерно так:

document.addEventListener('click', deepThought.alertAnswer.bind(deepThought), false);

Как достучаться до свойства объекта Javascript из его же функции при запуске её через EventListener или зачем this === e.target?

Войдите на сайт