Event target in JS

Implementation of the event target in the JS.

Hello, beautiful people on the internet.

EventTarget is like a built-in messenger in your browser. It listens for events (like clicks or key presses) and reacts when something happens. Think of it as the core system that makes buttons clickable and forms interactive.

Get Deep Shah’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

They are exactly like Node JS’s EventEmitter.

How It Works:

Listening for Events: You can ask EventTarget to listen for specific events like a friend listening for a doorbell.

Stopping the Listener: You can tell it to stop if you no longer want to listen

Sending Custom Events: You can create and send your events, like making a custom alert.

We can create our events by extending the EventTarget class shown below:

Our implementation

• To create our EventTarget class implementation, we need an Arrayor Setlike a mechanism to store all the events and their callbacks.
• We’ll choose Setover the Arrayto get rid of the duplicate callbacks.
• We’ll create an EventTarget class that will have listeners set.

addEventListener

• We’ll store the events as the key and callbacks as the Set.
• We’ll return this , so that addEventListener can be chained again.
• Sometimes, you only want your event listener to run once, like when showing a welcome message after a user logs in. By using { once: true }, the listener automatically removes itself after being triggered, so you don’t have to clean it up manually.
• To incorporate once functionality that only allows one callback to execute per event, we need to create the wrapper function that runs the function once, and then remove the listener afterward and add the wrapped function to the event. So it won’t be called afterward.

How It Works:

1. Original Callback:
   The user provides a function.
2. Wrapped Function:
   The wrappedFunc is a new function we create around the original callback. This new function adds the logic to automatically remove itself after it executes once.
3. Event Listener Management:
   We store the wrappedFunc in the listeners object, not the original callback, so we can track the wrapped listener and remove it after it has been triggered.

removeEventListener

• In the removal part, we just delete the callback from the set of the event.
• Returning this , so that it can be chained.

dispatchEventListener

• We’ll just call all the callbacks of the event with more args like type, target, timeStamp, and detail.

listenerCount

• We’ll just return the size of the set of the event.

rawListeners

• We’ll just return all the callbacks as an array of the event.

Example

Examples Where EventTarget Shines:

• Custom Events: Broadcasting updates in a chat app.
• State Management: Notifying multiple components about data changes.

I’m always looking to improve and would love to hear your thoughts! If you have any suggestions, feedback, or topics you’d like me to cover, please feel free to share them in the comments below. Your insights are greatly appreciated! 🙂

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord | Newsletter | Podcast
• Create a free AI-powered blog on Differ.
• More content at Stackademic.com
• Have a story to share? Join our global community of writers today!