Frontend Master

JavaScript Curriculum

Event Types
+50 XP

Event Types

easy
~30 min·50 XP

The coffee shop page needs live search as you type, keyboard shortcuts to navigate the menu, and a contact form that validates as you fill it in. Each feature needs a different event type.

Event Types

Every user interaction fires a specific event. Picking the right one matters — input fires on every keystroke while change only fires when the field loses focus. mouseenter doesn't bubble while mouseover does.

Event Type Gallery

Browse all major event categories and their use cases:

event-gallery.js
click

Single click — left mouse button released

Common use casesButtons, cards, links, toggles
element.addEventListener('click', (event) => {
  // handle click
  console.log(event.type) // → 'click'
})
💡input vs change
Use `input` when you need to react to every single keystroke — live search, character count, preview. Use `change` when you only need to react when the user finishes — file inputs, dropdowns, checkboxes. `change` fires on blur for text inputs.

Keyboard Events — Live Inspector

See exactly what the keyboard event object contains for any key combination:

keyboard-events.js
Type here to capture keydown events
Press any key to see the event object properties
// Common keyboard patterns:
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter')  submitForm()
  if (e.key === 'Escape') closeModal()
  if (e.key === 'ArrowUp') selectPrev()

  // Detect shortcuts:
  if (e.ctrlKey && e.key === 'k') openSearch()
})
ℹ️event.key is what you want
Always use `event.key` — it gives you the character or named key: `"a"`, `"Enter"`, `"Escape"`, `"ArrowUp"`. Avoid `event.keyCode` — it is deprecated and only gives numbers. Use `event.code` when you care about physical key position (e.g., gaming controls).

Mouse Events — Live Tracker

See mousemove, click positions, and clientX/Y in action:

mouse-tracker.js
Move mouse here · click to place dots
event.clientX
0
event.clientY
0
clicks placed
0
const area = document.querySelector('.track-area')

area.addEventListener('mousemove', (e) => {
  const rect = area.getBoundingClientRect()
  const x = e.clientX - rect.left  // relative to element
  const y = e.clientY - rect.top
  cursor.style.transform = `translate(${x}px, ${y}px)`
})

area.addEventListener('click', (e) => {
  placeDot(e.clientX, e.clientY)
})
⚠️Throttle mousemove and scroll events
`mousemove` and `scroll` fire hundreds of times per second. Never do heavy work (DOM updates, API calls) directly in these handlers. Use requestAnimationFrame or a debounce/throttle wrapper to limit how often your code runs.

Your Challenge

Wire the search input: input event → filter .card elements by matching h3.textContent.toLowerCase(). keydown event → if e.key === 'Escape' clear the input and show all cards. focus/blur → toggle a .focused class on the parent .search-group.

Challenge

Wire three event types on the search input: 'input' to filter cards as you type, 'keydown' to clear the field on Escape, and 'focus'/'blur' to add/remove a highlighted class on the input's parent.

clickdblclickkeydownkeyupinputchangesubmitfocusblurmousemovemouseentermouseleaveDOMContentLoadedevent.key
Event Types | Nexus Learn