Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Event Handling - User Interaction

🖱️ Mouse Events

Mouse events detect how users interact using the mouse.

📌 Why Mouse Events Matter

  • React to user intention

  • Build interactive UI

  • Improve UX (hover, drag, menus)

🧩 Common Mouse Events

Event

Fires When

click

Mouse button clicked

dblclick

Double click

mouseover

Cursor enters element

mouseout

Cursor leaves element

mouseenter

Cursor enters (no bubbling)

mouseleave

Cursor leaves (no bubbling)

mousemove

Mouse moves

🧠 How it Works

  • mouseover → cursor enters → color changes

  • mouseout → cursor leaves → color resets

📌 Real-World Uses

✔ Hover effects

✔ Tooltips

✔ Dropdown menus

✔ Drag & drop

⌨️ Keyboard Events

Keyboard events track key presses and releases.

🧩 Common Keyboard Events

Event

Meaning

keydown

Key pressed

keyup

Key released

🧪 Detect Pressed Key Example

document.addEventListener("keydown", (event) => {
  console.log(event.key);
});
a
Enter
Escape

🧠 Important Properties

Property

Meaning

event.key

Actual key value

event.code

Physical key

event.ctrlKey

Ctrl pressed?

event.shiftKey

Shift pressed?

📌 Real-World Uses

✔ Form validation

✔ Keyboard shortcuts

✔ Games

✔ Accessibility

📜 Scroll Events

Scroll events fire when the user scrolls the page or an element.

📌 Common Use Cases

✔ Infinite scrolling

✔ Sticky headers

✔ Reveal animations

✔ Scroll progress bars

⚠️ Performance Warning

  • Fires many times per second

  • Heavy logic can cause lag

✔ Use throttle or debounce in real apps

🎯 scrollIntoView()

Scrolls a specific element into the visible area.

🧠 Why It’s Useful

✔ No manual scroll math

✔ Cleaner code

✔ Smooth UX

📌 Common Uses

✔ Navigation links

✔ “Scroll to section” buttons

✔ Help & FAQ navigation

🎯 Focus Events

Focus events detect when an element gains or loses focus.

Event

Meaning

focus

Element selected

blur

Element deselected

focusin

Elements focused in

focusout

Elemenrs Focused out

📌 Why Focus Events Matter

✔ Form validation

✔ Accessibility (keyboard users)

✔ Better UX feedback

🔗 hashchange Event

Triggered when the URL hash (#) changes.

🌐 Example URL

example.com/#profile
example.com/#settings

🧠 How It Works

  • Clicking anchor links changes hash

  • Page does not reload

  • hashchange event fires

📌 Real-World Uses

✔ Single Page Applications (SPA)

✔ Tab navigation

✔ Section routing

🧠 Quick Summary

Event Type

Used For

Mouse

Hover, clicks

Keyboard

Shortcuts, forms

Scroll

Animations, loading

scrollIntoView

Smooth navigation

Focus

Form UX

hashchange

SPA routing