Unable to define this context in document.eventListener

I am implementing a scenario in which on clicking outside the drawer, i want to execute the saveChange action but somehow it is giving me the error that saveChange is not a function. I tried different ways to set the context but it is not working.

export default class DrawerModel {
    constructor(context) {
        this.data = context.primaryInfoData;
        this.name = ko.observable('test');
    
        document.addEventListener("click", function (e) {
            var self= this;
            var element = e.target;
            let isOutside = true;
            for (var element = e.target; element; element = element.parentNode) {
                if (element.id === 'drawer_primaryInfoDrawer') {
                   isOutside = false;
                }
            }
            if(isOutside) {
                    self.saveChanges();
            }           
            
        });
    }

    saveChanges() {
       const data = {
        title: this.name(),
       }
        this.data.valueChangeHandler(data);
    };

}

Error :

Uncaught TypeError: self.saveChanges is not a function

Answer

this is because in your event listener, this refers to the window instead of your class. you can fix this by adding .bind(this) to your function like so:

document.addEventListener("click", function (e) {
    // ...
}.bind(this));

Advertisement

Answer