TypeScript - How to access the class instance from event handler method

Question

In the code snippet below, I have a TypeScript class and the instance method buz is the listener for canvas' click event.

this keyword in buz method refers to the event's target object(canvas).

How to get access to the foo instance from the buz method?

    class Foo {
        constructor(private _canvas: HTMLCanvasElement, private _message: string) {

        }

        public bar(): void {
            this._canvas.addEventListener(`click`, this.buz);
        }

        private buz(e: MouseEvent): void {
            console.info(`After click event, 'this' refers to canvas and not to the instance of Foo:`);
            console.info(this);
            console.warn(`Message is: "${this._message}"`); // error
        }
    }

    window.addEventListener('load', () => {
        let canvas = <HTMLCanvasElement> document.getElementById('canvas');
        let foo = new Foo(canvas, "Hello World");
        foo.bar();
    });

My tsconfig.json has these settings:

"compilerOptions": {
  "module": "commonjs",
  "target": "es5",
  "sourceMap": true
},

Possible duplicate of The value of "this" within the handler using addEventListener — Andrew Li
– Andrew Li, Commented Jun 17, 2017 at 15:46
@AndrewLi Very similar to that but this one is using TS and its arrow functions. No need for bind — Poulad
– Poulad, Commented Jun 17, 2017 at 15:51

Suren Srapyan · Accepted Answer · 2017-06-17 15:55:12Z

29

Your context is lost in the buz method when you pass it as a parameter. You can use arrow functions to achieve that. Arrow functions will save the context.

public bar(): void {
    this._canvas.addEventListener(`click`, (evt) => this.buz(evt));
}

edited Jun 17, 2017 at 15:55

answered Jun 17, 2017 at 15:45

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

Poulad Over a year ago

Thank you. I changed my method call to this: this._canvas.addEventListener('click', evt => this.buz(evt));

Plastic Over a year ago

you save my day

Collectives™ on Stack Overflow

TypeScript - How to access the class instance from event handler method

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related