Skip to content
PlayOwl

Coding · Grade 10

Events and User Interface State

Learners discover how JavaScript's event loop runs handlers and timers one at a time, use event objects and event delegation, and manage interface state with a single state object, actions and pure update (reducer) functions. They finish by designing responsive and accessible interactions: throttling rapid clicks, preventing double submissions, keyboard support, focus management and announced status messages.

  • 4 lessons
  • About 90 minutes
  • Check what you learned: 8 questions
  • Ways to answer: choose an answer, trace code, match pairs, put in order, sort into groups and true or false
See plans Included with Family, Teacher and School plans. Open in PlayOwl

What learners will discover

  • Explain the event loop and predict the order in which synchronous code, handlers and timers run.
  • Use event objects (type, target, key) and event delegation to handle events for many elements.
  • Manage interface state with a single state object, actions and pure update functions.
  • Design responsive, accessible interactions: throttling or debouncing, preventing double actions, keyboard support and status announcements.

Lessons

  1. The event loop 6 steps3 practiceabout 22 min
  2. Event objects and delegation 5 steps3 practiceabout 20 min
  3. State, actions and updates 5 steps3 practiceabout 22 min
  4. Responsive and accessible interactions 4 steps3 practiceabout 18 min
  5. Check what you learned 8 questions at the end

Keep exploring

More 10th grade coding

Guide for grown-ups