DOM handleEvent: a cross-platform standard since year 2000

A solution to many problems

  • it’s the best solution in terms of RAM. Applications will not “explode” or crash on emerging markets devices. You won’t ever retain extra unnecessary bytes for the sake of a component context.
  • one single entry point to handle every ordinary or custom DOM event. You’ll never need to bind another property, you’ll never need to change your class definition with another arrow. Your components will always be ready to handle a new listener without any maintenance at all.
  • it’s more secure than reassigned properties. Whenever you comp.method = comp.method.bind(comp) or you comp.method = e => comp.stuff() you are creating a public enumerable property at runtime instead of keeping behaviors at class, object, or component definition time. With handleEvent you can create a single private delegate to handle internally everything you want, giving you the ability to expose and use the same component both internally and externally.
  • it is always possible to remove a listener. You’ll always be able to drop that listener that’s not supposed to happen again. No listeners defined in closures issues, no unreachable bound methods as in el.addEventListener(type, this.method.bind(this)) which makes you lose control of your own application.
  • listeners have a meaningful context instead of a redundant one. Every listener function will be invoked with a context that is exactly the event.currentTarget information any event would already carry.
  • strawberry on top: if you add by accident 2 times the same object as listener, it won’t be fired/dispatched/triggered twice ’cause it was already known, so the platform will avoid redundant dispatches 🎉

How does it work?

About Memory Consumption

One instance to rule them all

But Security First

Listeners can always be removed

If you need a context, do it right

If you accidentally add an object twice, you’re safe

What about Frameworks?

  • is your framework supporting handleEvent? Awesome! Start seeing where this pattern can be useful.
  • is it not? Please file a bug or send a PR to such framework asking why they don’t and, maybe, point at this blog post if they need to know more.

As Summary

--

--

--

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Set Up Airbnb Style Guide

The Top 3 New JavaScript ES 2021 (ES 12) Features I’m Excited About this

Merge Two Sorted Arrays Without Extra Space Efficiently[O(1)] [Gap Method][Detailed & Simplified]

Create a Vue.js component library (Part 1)

How to deliver a React Native app to the client

Level Up and Launch: Week 6 Review

How to deploy a static Gatsby app to Heroku

How to host a static website on GitHub pages for free

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrea Giammarchi

Andrea Giammarchi

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.

More from Medium

Speeding Up Front End Development and Making It a Piece of Cake with Webix

Animating error tags in Phoenix LiveView

Vite — Next Gen. Build Tool

Web Development: Things to Consider When Engaging a Company for a New Project