Javascript Event Listener in Class

Question

class ProfileCollaboration {

    constructor() { 
        document.addEventListener('profileEvent', this.profileEvent)
    }

    profileEvent(event) {
        let profileEvent = event.detail
    
        if (profileEvent.name !== 'profileEditing') {
            return
        }
    
        if (profileEvent.editing === true) {
            console.log(this)
            this.enableEditingMode()
        } else {
            this.disableEditingMode()
        }
    }

    enableEditingMod() {
        console.log('enabled');
    }

    disableEditingMode() {
        console.log('disabled');
    }

}

Console log says: this.enableEditingMode is not a function

Which is correct because this is now the context of the addEventListener.

How can I listen for events inside a js class?

Um, do you people realize you can fire any custom events? :) — epascarello
– epascarello, Commented Aug 26, 2021 at 17:13

capchuck · Accepted Answer · 2021-08-26 17:04:16Z

3

event listener callbacks are by default binded to element.

If you want it work, you should attach it like this:

document.addEventListener('profileEvent', this.profileEvent.bind(this));

answered Aug 26, 2021 at 17:04

capchuck

4592 silver badges9 bronze badges

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

1 Comment

Grifting Over a year ago

Thanks a lot, I didn't even now bind existed developer.mozilla.org/de/docs/Web/JavaScript/Reference/… this is awesome!

Collectives™ on Stack Overflow

Javascript Event Listener in Class

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related