How did many libraries make their own event listener and their own events, like in the leaflet library?

Question

In many libraries, like leaflet, they have their own events, like the 'resize', or 'zoom' events, you can see them at here, they also have their own events objects, with custom properties, and those events object don't have the properties of DOM event, like bubbles, cancelBubble, etc. And they use the on() method to listen to those event.

And I wonder, how did they make that, how did they create their own events, events objects and their own event listener, I heard of something called 'Event Emitter', but it is a part of nodejs, it only works outside of browser, so I wonder how did they make them works in the browser.

I guess that they created their own Event Emitter and use them in their library, because on the internet there are many hand-built event emitters that may work in the browser (im not sure if this is true), so i guess it still posible to use something similar to 'event emitter' in the broswer.

So what is the truth? How did they make those events and events listener like they are using Event Emitter in the browser. Thank you very much for reading this question, im not sure if this is a good question, but hopefully, I can know the answer from you guys, thank you so much!

A quick search for _"javascript custom event"_ ends in a bunch of suitable resources like [Creating and triggering events - Event reference | MDN](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events) or [Create JavaScript custom event](https://stackoverflow.com/questions/23344625/) -> [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — Andreas, Jul 10 '21 at 07:27

score 0 · Accepted Answer · answered Jul 10 '21 at 07:20

You can dispatch your own custom events as part of the DOM API.

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);

How did many libraries make their own event listener and their own events, like in the leaflet library?

1 Answers1