Linking object method to html element listener

Question

I'm trying to add an object method to an EventListener on an HTML element. But when I do that the this variable becomes the elements itself instead of the object.

class Foo {
  constructor(element, data) {
    this.data = data;
    this.input = element;
    this.input.oninput = this.update;
  }

  update() {
    this.data; // The context has changed to the element
  }
}

Here's my workaround:

class Foo {
  constructor(element, data) {
    this.data = data;
    this.input = element;
    this.input.Foo = this;
    this.input.oninput = this.update;
  }

  update() {
    this.Foo.data;
  }
}

However, I feel like this isn't the most elegant way of formatting this. How do I program it in such a way that the object's method remembers the object it was apart of?

tklg · Accepted Answer · 2017-01-19 03:52:57Z

1

Function.prototype.bind() may help - it takes an argument and uses it as its this value.

var foo = new Foo();
var boundUpdate = foo.update.bind(foo);
boundUpdate();

answered Jan 19, 2017 at 3:52

tklg

2,6532 gold badges21 silver badges24 bronze badges

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

1 Comment

George Over a year ago

Exactly what i needed.

Collectives™ on Stack Overflow

Linking object method to html element listener

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related