🤯 I Just Realized JavaScript Has WAY More Event Listeners Than I Ever Imagined
Hi 👋 I’m Abhinav Prakash - a full-stack dev who loves building with Node.js, React, Next, Astro, MongoDB & Cloud. I share my blogs, learnings, side-projects, and dev journey here 🚀
For the longest time, I thought I had JavaScript events pretty much figured out.
You know the usual ones:
clickinputsubmitscrollmaybe
keydown
And honestly? My work was getting done. Projects were shipping. Clients were happy.
So in my head, the logic was simple:
“If these events are enough to build websites, why even bother learning the rest?”
Turns out… that mindset was lazy 😅 And I didn’t realize it until very recently.
How I Ended Up Discovering This
This whole realization started in a very normal way.
I was going through a GitHub repository, just reading someone else’s code. No tutorial, no blog - just raw production code. And that’s when I noticed event listeners I had literally never used before.
Stuff like:
visibilitychangepointereventsanimation and transition events
At first, I ignored it.
Because deep down, I already knew JavaScript has a lot of events. I just assumed:
“Yeah yeah, those are probably edge-case events. I don’t really need them.”
But then I paused and thought:
What if I’m solving problems the hard way, while JavaScript already gives me better tools?
What if some things I’m doing with hacks, timers, or heavy logic could be done more cleanly using the right event?
That’s when I decided to dig deeper.
The Big Realization
JavaScript doesn’t just react to clicks or inputs.
It literally listens to:
user actions
browser state
network changes
page visibility
animations
media playback
device input
even tab switching
system behavior
Basically, JavaScript is always watching 👀 You just need to know what to listen for.
Categories of JavaScript Events (The Eye-Opener)
I’m not going to dump every single event here - that would be insane. But here’s a mental map that completely changed how I see events.
🖱️ Mouse Events
These are the basics, but there’s more than just click.
clickdblclickmouseenter/mouseleavemouseover/mouseoutcontextmenu(right click)
Useful for hover effects, menus, tooltips, custom interactions.
⌨️ Keyboard Events
keydownkeyup
Great for shortcuts, accessibility, power-user features.
✍️ Form & Input Events
inputchangefocusblursubmit
These control almost every form interaction you see on the web.
📜 Scroll & Viewport Events
scrollresizewheel
Still useful, but many scroll-based problems are now better solved with Intersection Observer instead of raw scroll.
🌐 Network Events
Yes, this exists.
onlineoffline
You can literally detect when the user loses or regains network and update UI accordingly.
👁️ Page Visibility & Lifecycle
These are criminally underrated.
visibilitychangepageshowpagehidebeforeunload
Perfect for:
pausing videos
stopping timers
saving state
analytics accuracy
📦 Drag & Drop
dragstartdragoverdropdragend
Used for file uploads, dashboards, reorderable lists, You must have used these in drag & drop.
📱 Touch & Pointer Events
Instead of separating mouse and touch, modern browsers give:
pointerdownpointermovepointerupgotpointercapturelostpointercapture
One API → mouse, touch, pen.
🎬 Animation & Transition Events
These blew my mind a bit.
animationstartanimationendtransitionend
You can literally react to CSS finishing its job instead of guessing with timeouts.
🎧 Media Events
For audio & video:
playpauseendedtimeupdatevolumechangetrackchange
Used heavily in modern media-heavy websites.
🧠 Page, Browser & System Level
These events are about browser state, not UI clicks.
visibilitychange
Fires when the tab becomes hidden or visible.pageshow/pagehide
Triggered when navigating back/forward (especially with bfcache).beforeunload
Fired before the user leaves the page.storage
Fired whenlocalStoragechanges in another tab.
Why This Actually Matters
This isn’t about memorizing event names.
It’s about this shift in mindset:
Instead of forcing logic with hacks, ask yourself: “Is there already an event for this?”
Chances are - yes, there is.
Using the right event:
simplifies code
improves performance
makes behavior more predictable
reduces bugs
You Don’t Need to Know Them All (Seriously)
Let’s be real - nobody remembers all JavaScript events.
And that’s completely fine.
What does matter is:
knowing these events exist
knowing where to look when needed
Where You Should Learn Them Properly
If you really want to explore events in depth:
📘 MDN Web Docs Best place to understand what each event does, with examples.
🌍 Can I Use Always check browser support before using advanced or newer events
There are many more events than the ones mentioned in this blog.
If you’re curious, definitely explore the full MDN list here:
👉 https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events
👉 https://developer.mozilla.org/en-US/docs/Web/API/Window#events
