🎯 JavaScript DOM Events – Everything You Need to Know
DOM Events are how your JavaScript code responds to user interactions (clicks, scrolls, typing, etc.) or browser actions (loading, resizing, etc.). They’re a core part of making websites interactive.
🧠 What Is a DOM Event?
A DOM event is a signal that something happened in the browser (like a button click or key press), and JavaScript can listen and react to that event.
🔧 Attaching Event Listeners
✅ Basic Syntax
✅ Example
🎯 Common DOM Events
| Type | Event | Description |
|---|---|---|
| Mouse | click, dblclick, mouseover, mouseout, contextmenu | Interactions with mouse |
| Keyboard | keydown, keyup, keypress | Keyboard input |
| Form | submit, change, input, focus, blur | Form interactions |
| Window | load, resize, scroll, beforeunload | Page/window events |
| Clipboard | copy, cut, paste | Clipboard actions |
📦 Event Object (event)
You can get details about the event using the event object:
🛠️ Example: Prevent Form Submission
⚡ Event Delegation
Instead of attaching events to multiple children, you attach one event to a parent:
✅ This saves memory and works for dynamically added elements.
🧩 Event Propagation
📈 Bubbling (default)
Event goes from target → up to parent
📉 Capturing
Event goes top → down to the target
🧪 stopPropagation() and stopImmediatePropagation()
Prevent events from continuing to bubble/capture:
📚 Learn More
✅ Summary
| Task | Method |
|---|---|
| Listen to an event | addEventListener() |
| Stop bubbling | event.stopPropagation() |
| Cancel default behavior | event.preventDefault() |
| Get event info | event.target, event.type |
