JavaScript losing reference when adding an listener

Question

Below is my code and I'm losing reference to the object when adding the objects method keydown to an eventlistener anyone know why this is happening? and whats the right way to do it

<html>
<head>
<title>Testpage</title>

<script type="text/javascript"> 
Person = function(fname, lname)
    {
    this.lastname=fname;
    this.firstname=lname;
    }

Person.prototype.toString = function()
    {
    return this.firstname+" "+this.lastname;
    }

Person.prototype.keydown = function (event) 
    {
    alert(this.firstname);
    //return this.firstname+" "+this.lastname;
    }

function init() 
    {
    var k=new Person("Paul", "Nistor");
    document.getElementById("nowpressed").value=k.toString();

    window.addEventListener("keydown", k.keydown, true);
    }
</script>
</head>
<body onLoad="init();">
<form>
    Now pressed: <input id="nowpressed" name="nowpressed" type="text" size="20" value="">
</form>
</body>
</html>

score 0 · Accepted Answer · answered Mar 18 '15 at 06:59

0

One way is to provide an anonymous function:

window.addEventListener("keydown", function() {
    k.keydown();
}, true);

Another is to bind k.keydown method to proper context explicitly:

window.addEventListener("keydown", k.keydown.bind(k), true);

answered Mar 18 '15 at 06:59

dfsq

182,609
24
222
242

thanks alot ill study this 2 things althou at the moment i dont understand them completly – Noooooob Mar 18 '15 at 07:16
Yes, it's a big topic, you just need to read some docs and practice and everything will clear up. – dfsq Mar 18 '15 at 07:18
Check [bind](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) documentation. – dfsq Mar 18 '15 at 07:19
i just read the documentation and its very confusing why do i have to bind the same object again to that object k.keydown.bind(k) since i have already invoked a method form that object as k.keydown or why do i need that wrapper no name function :) – Noooooob Mar 18 '15 at 08:37
The thing is that the function passed in `addEventListener` is invoked in the context of the element handling the event (element you bound event to, in your case `window` object). So `this` will be this object. So when you pass just `k.keydown` it will be called with `this` pointing to wrong object. That's why you can use anonymous function instead and from inside of it call `k.keydown()` and it will preserve proper context. `bind` does basically the same thing - it creates a new function, sort of wrapper that will be called with necessary `this` (in your case `k`). – dfsq Mar 18 '15 at 08:44
Yup i Know that but I imaggine its like this we have to objects like in my case window and k or we could have and other 2 objects a and b; a has method x and b has method y defined in them and there is no problem when you call form method x the method b.y in b.y you can access the properties of b without any problem (thats very strange than in this case with events this does not apply) – Noooooob Mar 18 '15 at 09:34
I finally understood my problem that i don't get the fact of what "this" keyword is. Now I do have understood that you mean by context thanks alot for all your help community I have to do some testing and reading now regarding this cause it seems i understood it some other way. Love ya and have a nice day – Noooooob Mar 18 '15 at 10:01

JavaScript losing reference when adding an listener

1 Answers1