Access object instance inside an event handler

Question

I have the following code:

var myObj = {

  inputs: document.getElementsByTagName('input'),

  attachKeyEvent: function() {
    for ( var i = 0; i < this.inputs.length; i++ ) {
        this.inputs[i].onkeypress = this.getChar;
        console.log(this); // => returns ref to myObj
    }
  },

  getChar: function(e) {
    console.log(this); // => [Object HTMLInputElement]
    // get a reference to myObj
  }
}

I have a DOM structure with a couple of <input type="text" /> elements. I need to write a couple of methods to enhance the key press event.

How can I get reference to the object instance within getChar()?

i think the approach is not logical. You should not use a private method from outside the object itself. Instead, use a public getChar function — Sebas
– Sebas, Commented Jul 29, 2013 at 12:21

mohkhan · Accepted Answer · 2013-07-29 11:35:12Z

3

Like this...

var myObj = {

  inputs: document.getElementsByTagName('input'),

  attachKeyEvent: function() {
    var me = this;
    var handler = function(){
        me.getChar.apply(me, arguments);
    }
    for ( var i = 0; i < this.inputs.length; i++ ) {
        this.inputs[i].onkeypress = handler;
        console.log(this); // => returns ref to myObj
    }
  },

  getChar: function(e) {
    console.log(this); // => [Object HTMLInputElement]
    // get a reference to myObj
  }
}

edited Jul 29, 2013 at 11:35

answered Jul 29, 2013 at 11:24

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yury Tarabanko Over a year ago

Why not create function once outside of the for-loop?

Collectives™ on Stack Overflow

Access object instance inside an event handler

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related