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) {

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


Error :

Uncaught TypeError: self.saveChanges is not a function

>Solution :

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) {
    // ...

Leave a Reply