Events

Learn how to make your web pages come alive by responding to user interactions like clicks, key presses, and form submissions.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

🎯 Real-World Analogy: Events are like a hotel receptionist :

An event is an action that occurs in the browser.

JavaScript allows you to listen for these events and respond to them — this is called event handling .

💡 Without events, your web pages would be static and non-interactive.

This is the basic pattern of all JavaScript interactivity — select → listen → respond .

The modern and most reliable way to handle events is with addEventListener() .

📘 Syntax:

🧠 Example: Button Click

Mouse events are triggered when the user interacts with the mouse.

🧩 Example:

Keyboard events happen when users press keys on their keyboard.

They're often used in forms, games, or shortcuts.

Example:

Forms have their own events — they're essential for validating input and handling data without refreshing the page.

💡 Example: Prevent Default Submission

💡 Always use event.preventDefault() when handling form data in JavaScript — it stops the browser from reloading the page.

Example: Input Events

Every keystroke triggers the event in real time.

Whenever an event happens, JavaScript automatically passes an event object to the callback function.

Example: Stopping Default Behavior

Some elements (like links or forms) have default behaviors.

You can stop those actions using event.preventDefault() .

🟢 Result: The link won't open, but the message will appear in the console.

Let's create a simple program that displays which key the user pressed.

🟢 Result: The background toggles each time you click the button!

The window object represents the browser window itself.

You can detect changes like loading, resizing, or scrolling.

Example: Page Load

Example: Window Resize

Example: Scroll Event

💬 Recap

Every interactive feature — from pressing Play on YouTube to typing in a search bar — starts with a JavaScript event.

Mastering events turns you from a coder into a true frontend developer!

Next up: Learn how to work with Arrays & Objects to manage data! 📦

You can now make web pages respond to user interactions — clicks, typing, scrolling, and form submissions!

Up next: Arrays & Objects — the two most important data structures in JavaScript! 📦

Practice quiz

What is the modern, recommended way to handle an event?

  • element.onclick = fn
  • element.attachEvent(fn)
  • element.addEventListener(type, fn)
  • element.handle(fn)

Answer: element.addEventListener(type, fn). addEventListener is the modern, reliable way and lets you attach multiple listeners without overwriting.

When does the 'click' event fire?

  • When the user clicks the element
  • When a key is pressed
  • When a form is submitted
  • When the page loads

Answer: When the user clicks the element. The click event fires when the user clicks the element — used for buttons, links, and cards.

What does event.preventDefault() do?

  • Stops the event from firing
  • Removes the listener
  • Logs the event
  • Stops the browser's default action, like a form reload

Answer: Stops the browser's default action, like a form reload. preventDefault stops default behaviour such as a form submitting/reloading or a link navigating.

Which property tells you which key was pressed in a keydown handler?

  • event.code only
  • event.key
  • event.value
  • event.pressed

Answer: event.key. event.key gives the value of the key the user pressed.

How many listeners can you attach to one element with addEventListener?

  • As many as you want — they do not overwrite each other
  • Only one
  • Up to three
  • One per event type, replacing the previous

Answer: As many as you want — they do not overwrite each other. addEventListener lets you attach as many listeners as you like; they all run and none overwrite the others.

Which form event fires while the user is typing in a field?

  • submit
  • blur
  • input
  • load

Answer: input. The input event fires on every keystroke in real time as the value changes.

Which property of the event object is the element that triggered it?

  • event.element
  • event.target
  • event.source
  • event.node

Answer: event.target. event.target references the element that triggered the event; event.type gives the event's name.

Which event fires when an input loses focus?

  • focus
  • input
  • change
  • blur

Answer: blur. blur fires when an element loses focus; focus fires when it gains focus.

Which keyboard event is deprecated, with keydown recommended instead?

  • keyup
  • keypress
  • keydown
  • keyhold

Answer: keypress. keypress is deprecated; the lesson recommends using keydown instead.

On the window object, which event signals the page has fully loaded?

  • ready
  • open
  • load
  • start

Answer: load. window's 'load' event fires when the page is fully loaded.