Recap

Grade 12, page 9 of 9. A one-minute read.

  • An event is something that happens on the page: a click, a key press, typing, submitting a form...
  • element.addEventListener("event", callback) runs the callback every time that event happens. Pass the function without ().
  • Common events: click, input, change, submit, keydown, mouseenter, mouseleave, scroll, DOMContentLoaded.
  • The callback receives an event object. event.target is the element where it happened. event.key tells you which key was pressed.
  • An input's .value is always a string. Trim it, check it, convert it if needed.
  • Listen for submit on the form, and call event.preventDefault() to stop the page reloading.
  • Events bubble up from the target through its ancestors. Event delegation uses one listener on a parent to handle many children, even ones added later.
  • localStorage saves strings that survive page reloads: setItem, getItem, removeItem. Use JSON.stringify and JSON.parse for arrays and objects. Never store secrets in it.

Reading is step one

CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.

Start learning