InfoparkDailyCAREER TOOLS

JavaScript · Lesson 8 of 8

Events

addEventListener, click and input events, forms.

Events let code react to the user: click, input, submit, keydown, change.

button.addEventListener("click", () => {
  …
});
  • The handler receives an event object — event.target is the element.
  • event.preventDefault() stops default behaviour such as a form reload.
  • Prefer addEventListener over inline onclick="" attributes.

Try it yourself

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

  • addEventListener(type, handler).
  • event.target is the element.
  • preventDefault stops form reloads.

Quick check

Which call stops a form from reloading the page on submit?

Practice task

Build a character counter: as the user types in a textarea, show how many characters are left out of 200.

Interview corner

What is event delegation?

Attach one listener to a parent and use event.target to handle events from many children — efficient and works for elements added later.

What is event bubbling?

An event fires on the target first and then moves up through its ancestors. stopPropagation() stops it.

Further reading

Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.

Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.