calling javascript class's method using this keyword in addeventlistener

Question

I want to call the function getItemList() which is in a class 'Example' through addEventListener

var text_box = document.getElementById(this.text_box_id);
text_box.addEventListener('onchange', function(){this.getItemList('3', '10')}, false)

Felix Kling · Accepted Answer · 2011-03-09 08:18:30Z

1

It should be change, not onchange. Only in IE you have to use on(EventName).

this inside the handler will refer to text_box (the element the event was raised on). You have to capture a reference to the current this:

var that = this;
text_box.addEventListener('change', function(){    
    that.getItemList('3', '10')
}, false);

Or in browsers supporting bind (you can also provide your own implementation as shown in this documentation):

text_box.addEventListener('change', function(){    
    this.getItemList('3', '10')
}.bind(this), false);

answered Mar 9, 2011 at 8:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Answer 1