How to reach the property of a Javascript object from its own function when running it through an EventListener or why this === e.target?

8

8001472014-10-13 01:28:40

JavaScript

800147, 2014-10-13 01:28:40

I was looking for an answer, but it's hard to formulate a request. In general, a hackneyed problem with this in 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>

If you just run deepThought.alertAnswer(); and inside the function write alert(this.answer); then everything will work, but you need to run the function through an event, and in this case this === e.target . Save my object-oriented brain. Alternative structures are welcome, but as a result, the alertAnswer function will be deduced into a separate object, and a bunch of different deepThoughts with different answers will inherit it. In general, do not offer hardcode.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

E

Evgeny Petrov, 2014-10-13
@800147

you need to run the function through an event, and in this case this === e.target

Absolutely not. When using addEventListener , this refers to the node where the listener is registered.
For example, register like this:

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

How to bind an activation object (aka this ) to a strictly defined object (and not even an HTML element)? You should read about bind (as well as call and apply ).
Altogether something like this:

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

M

Memfisrain, 2014-10-13
@Memfisrain

For example, create an object using new function, store a reference to the object itself in a variable, and access the object from the method not through this, but through this variable:

var deepThought = new function() {
                var self = this;

                this.answer = 42;

                this.alertAnswer = function() {
                    alert(self.answer);
                };
            }

8

800147, 2014-10-13
@800147

Sorry for the flood, but I found the solution myself :)
And if the EventListener needs to be added inside another function of the deepThought object, then it should look like this:

var deepThought = {
    ...
    onLoad: function () {
        var a = this;
        document.getElementById("button").addEventListener('click', function (e) {a.alertAnswer();});
    }
}