Create own EventEmitter Class in JS

In an event-driven programming language, we can emit an event on a particular behavior.

In Javascript we’ve many events like `mouse-hover, click, onBlur, on-hover, onFocous, etc. let’s take an example.

submitBtn.addEventListener("click" , () => {
    console.log("I'm Jasraj Chouhan a full stack web developer");
} )

So, in the above code, we register an addEventListener on the submit button and the event type is clicked.

But we should learn how to create our own EventEmitter Class which follows :

1. We can register an event

2. We can remove an event

3. We can emit an event

In the whole process we need a data structure which can easily store our event and callback and get in less time or operation. (HashMap or object)

1. Initialize a class with the name of EventEmitter with the constructor.

   1.  export class EventEmitter {
           constructor() {
              this.events = new Map();
           }
       }
      

2. Register an event

   1.  export class EventEmitter {
           constructor() {
              this.events = new Map();
           }
      
           on(event, listener) { // example btn.on("click" , () => {})
               if (!this.events.has(event)) {
                   this.events.set(event, []);
               }
               this.events.get(event).push(listener);
           }
       }
      

3. Remove an event

   1.  export class EventEmitter {
           constructor() {
              this.events = new Map();
           }
      
           on(event, listener) { // example btn.on("click" , () => {})
               if (!this.events.has(event)) {
                   this.events.set(event, []);
               }
               this.events.get(event).push(listener);
           }
      
            off(event, listener) { // btn.off("click" , () => {})
               if (this.events.has(event)) {
                   this.events.set(event, this.events.get(event).filter(cb => cb !== listener));
               }
           }
       }
      

4. Trigger an event or emit an event

   1.  export class EventEmitter {
           constructor() {
              this.events = new Map();
           }
      
           on(event, listener) { // example btn.on("click" , () => {})
               if (!this.events.has(event)) {
                   this.events.set(event, []);
               }
               this.events.get(event).push(listener);
           }
      
            off(event, listener) { // btn.off("click" , () => {})
               if (this.events.has(event)) {
                   this.events.set(event, this.events.get(event).filter(cb => cb !== listener));
               }
           }
      
           emit(event, ...args) {
               if (this.events.has(event)) {
                   this.events.get(event).forEach(listener => listener(...args));
               }
           }
       }