# 🤯 I Just Realized JavaScript Has WAY More Event Listeners Than I Ever Imagined For the longest time, I thought I had JavaScript events pretty much figured out. You know the usual ones: * `click` * `input` * `submit` * `scroll` * maybe `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: * `visibilitychange` * `pointer` events * animation 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`. * `click` * `dblclick` * `mouseenter` / `mouseleave` * `mouseover` / `mouseout` * `contextmenu` (right click) Useful for hover effects, menus, tooltips, custom interactions. --- ### ⌨️ Keyboard Events * `keydown` * `keyup` Great for shortcuts, accessibility, power-user features. --- ### ✍️ Form & Input Events * `input` * `change` * `focus` * `blur` * `submit` These control almost every form interaction you see on the web. --- ### 📜 Scroll & Viewport Events * `scroll` * `resize` * `wheel` Still useful, but many scroll-based problems are now better solved with **Intersection Observer** instead of raw `scroll`. --- ### 🌐 Network Events Yes, this exists. * `online` * `offline` You can literally detect when the user loses or regains network and update UI accordingly. --- ### 👁️ Page Visibility & Lifecycle These are criminally underrated. * `visibilitychange` * `pageshow` * `pagehide` * `beforeunload` Perfect for: * pausing videos * stopping timers * saving state * analytics accuracy --- ### 📦 Drag & Drop * `dragstart` * `dragover` * `drop` * `dragend` 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: * `pointerdown` * `pointermove` * `pointerup` * `gotpointercapture` * `lostpointercapture` One API → mouse, touch, pen. --- ### 🎬 Animation & Transition Events These blew my mind a bit. * `animationstart` * `animationend` * `transitionend` You can literally **react to CSS finishing its job** instead of guessing with timeouts. --- ### 🎧 Media Events For audio & video: * `play` * `pause` * `ended` * `timeupdate` * `volumechange` * `trackchange` 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](https://developer.mozilla.org/en-US/docs/Glossary/bfcache)). * `beforeunload` Fired before the user leaves the page. * `storage` Fired when `localStorage` changes 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**](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events) Best place to understand what each event does, with examples. * 🌍 [**Can I Use**](https://caniuse.com/) 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/Document_Object_Model/Events?utm_source=chatgpt.com) 👉 [https://developer.mozilla.org/en-US/docs/Web/API/Window#events](https://developer.mozilla.org/en-US/docs/Web/API/Window#events)