Knowledgebase

Events and User Interaction Print

  • webdevelopment, guide, howto, solution, zillionkinghost, hosting, support
  • 0

Responding to what people do.

WHAT AN EVENT IS

Something happening: a click, a key press, a form submission, content loading.

HOW TO RESPOND

Attach a listener to an element, for a named event.

WHAT EVENT PROPAGATION IS

An event moving down to the target, then back up through its ancestors.

WHY THAT MATTERS

A listener on a container receives events from its children.

WHAT DELEGATION IS

Listening on a container, and identifying which child caused the event.

WHY IT IS USEFUL

It handles elements added later, and uses one listener rather than many.

WHAT TO BE CAREFUL WITH

Preventing default behaviour without a reason Stopping propagation, which can break other handlers Attaching listeners repeatedly without removing them

WHY THAT LAST ONE

It causes handlers running several times, and prevents memory being released.

WHAT TO HANDLE BEYOND CLICKS

Keyboard events, so interaction does not require a pointer.

WHY

An element responding only to clicks is unusable by keyboard.

WHAT TO USE FOR INTERACTIVE ELEMENTS

Native elements: buttons, links, inputs.

WHY

They handle keyboard, focus and assistive technology already.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot