Custom Event on JavaScript Class

Question

How can I create an event that is attached to a class object?

I have to create a class that has an event that should be called at a certain time. The class looks like this and should call the event newMember when a new one is added. What works is that I attach a custom event to the window and call it which is not my goal.

Not NodeJS.

class Room {
    constructor() {
        this.members = {}
    }
    addMember(data) {
        if (!this.members[data.remotesid]) {
            this.members[data.socket] = data.identity
            //this.dispatchEvent();
        } else {
            console.log('Member already in room')
        }
    }
}

when a member is added to a Room. Like this var myRoom = new Room() myRoom.addeventlistener('newMember', (member) => { console.log(member); }) — herbbert
– herbbert, Commented May 21, 2022 at 9:18

herbbert · Accepted Answer · 2022-05-21 21:10:32Z

4

After being advised that I need to extend my class with EventTarget. I have now worked out this working solution.

class Room extends EventTarget {
    #event;
    constructor() {
        super();
        this.members = {}
    }
    addMember(data) {
        if (!this.members[data.remotesid]) {
            this.members[data.socket] = data
            this.#event = new CustomEvent("newMember", { detail: data });
            this.dispatchEvent(this.#event);
        } else {
            console.log('Member already in room')
        }
    }
}


var room = new Room();

room.addEventListener("newMember", function (e) {
    console.log("newMember event ", e);
});

edited May 21, 2022 at 21:10

answered May 21, 2022 at 11:36

herbbert

716 bronze badges

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

1 Comment

MrCarrot Over a year ago

Thanks, had the same issue and wouldn't have figured it out without this!

Collectives™ on Stack Overflow

Custom Event on JavaScript Class

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