adding Event Listeners to the instance of a Custom Class

Question

I have class for each of my page. So for Home, i have a home class and inside the home class are several HTMLElements. However, i want to dispatch an event from my home class that isn't tied to any particular HTMLElement so that my app.js can take action.

So for example:

export class app {
  private home: Home;

  constructor() {
    super();
    this.home = new Home();
    home.addEventListener(HomeEvent.TEST, this.myFunction); 
    //HomeEvent.TEST is just a static constant value "home-animation-event".
  }
}

again, this is probably trivial but I don't think I want to necessarily tie the eventlistener to a dom element or have app extend HTMLElement. What's the best approach for this please?

You can either fake one by using window.addEventListener and creating custom events to dispatch, or checkout the [`eventemitter3`](https://www.npmjs.com/package/eventemitter3) library — smac89, Sep 02 '22 at 03:50

score 0 · Accepted Answer · answered Sep 03 '22 at 04:09

Both answers supplied by cherryblossom and smac89 address the problem. I went with extends EventTarget however minor concerns about the cons associated with it. May ultimately resort to the eventemitter3 but slightly hesitant since the library hasn't been updated in 2 years.

adding Event Listeners to the instance of a Custom Class

1 Answers1