What types of events exist?

There are many types of events, but the most common can be grouped into categories:

• User Interface Events:

  • click: Mouse button press on an element.
  • dblclick: Double mouse button press on an element.
  • mousedown: Mouse button press (before release).
  • mouseup: Mouse button release.
  • mousemove: Mouse pointer movement over an element.
  • mouseover: Mouse pointer over an element.
  • mouseout: Mouse pointer leaving an element.
  • mouseenter: Mouse pointer enters an element (does not bubble from child elements).
  • mouseleave: Mouse pointer leaves an element (does not bubble from child elements).
  • contextmenu: Call of the right mouse button context menu.

• Keyboard Events:

  • keydown: Key press (before release).
  • keyup: Key release.
  • keypress: Key press and hold generating character input (deprecated, prefer keydown and keyup).

• Form Events:

  • submit: Form submission.
  • change: Change in form element value (e.g., <input>, <select>, <textarea>).
  • input: Change in form element value when its content is interactively changed by the user.
  • focus: Element gains focus.
  • blur: Element loses focus.
  • cut: Cutting content.
  • copy: Copying content.
  • paste: Pasting content.

• Loading and Error Events:

  • load: Completion of resource loading (e.g., image, script, page).
  • unload: Leaving the page.
  • beforeunload: Attempt to leave the page (allows displaying a confirmation dialog).
  • error: Error occurred during resource loading or script execution.

• Focus Events:

  • focusin: Element or any of its children gains focus.
  • focusout: Element or any of its children loses focus.

• Scroll Events:

  • scroll: Element is scrolled.

• Touch Events (for touch devices):

  • touchstart: Finger touches the screen.
  • touchend: Finger lifts off the screen.
  • touchmove: Finger moves on the screen.
  • touchcancel: Touch event is canceled (e.g., due to system menu call).

• Drag and Drop Events:

  • dragstart: Dragging starts.
  • drag: Element is being dragged.
  • dragend: Dragging ends.
  • dragenter: Element is dragged over a valid drop zone.
  • dragleave: Element is dragged out of a valid drop zone.
  • dragover: Element is dragged over a valid drop zone (requires preventing default to allow drop).
  • drop: Element is dropped on a valid drop zone.

• Browser History Events:

  • popstate: Change of active history entry during navigation (e.g., back/forward button).

• Window Resize Event:

  • resize: Browser window size changes.

This is not an exhaustive list, but it covers the most frequently encountered and important event types in web development. Understanding their purpose and behavior is key to creating interactive web applications.