react-dom/event-handlers

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

TouchEvent handler properties

TouchEvent handler receives a React event object with the following extra properties from TouchEvent: altKey, ctrlKey, changedTouches, getModifierState(key), metaKey, shiftKey, touches, targetTouches. It also includes inherited UIEvent properties: detail and view.

TransitionEvent handler onTransitionEnd

TransitionEvent handler receives a React event object with extra properties from TransitionEvent: elapsedTime, propertyName, and pseudoElement. Used with onTransitionEnd event handler.

UIEvent handler properties

UIEvent handler receives a React event object with extra properties from UIEvent: detail and view. Used with events like onScroll.

WheelEvent handler onWheel

WheelEvent handler receives a React event object with extra properties from WheelEvent: deltaMode, deltaX, deltaY, deltaZ. It also includes inherited MouseEvent properties: altKey, button, buttons, ctrlKey, clientX, clientY, getModifierState(key), metaKey, movementX, movementY, pageX, pageY, relatedTarget, screenX, screenY, shiftKey. And inherited UIEvent properties: detail and view.

Mouse event handlers order

Common mouse events in order: onMouseDown fires when mouse button is pressed, onMouseUp fires when mouse button is released, onClick fires after mouse button is released, onMouseEnter fires when pointer enters element (does not bubble), onMouseLeave fires when pointer leaves element (does not bubble), onMouseOver fires when pointer enters element (bubbles), onMouseMove fires while pointer moves over element.

Mouse events example

Example showing common mouse events and their firing order. The handlers include onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOver, and onMouseUp. Each handler receives a synthetic event object and logs which event fired on which element.

Pointer event handlers

Common pointer events include onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, and onPointerMove. These handlers work with various pointer types including mouse, touch, and pen inputs.

Pointer events example

Example showing common pointer events: onPointerDown, onPointerEnter, onPointerLeave, onPointerMove, and onPointerUp. Events fire on nested elements and include parent-child event propagation.

Focus event bubbling and relatedTarget

In React, focus events bubble. Use e.currentTarget and e.target to differentiate if focusing originated from the element itself or a child. Use e.relatedTarget to find which element focus moved from. Use e.currentTarget.contains(e.relatedTarget) to detect if focus entered or left the entire subtree.

Focus event handlers example

Example showing how to use onFocus and onBlur with e.currentTarget, e.target, and e.relatedTarget to detect: focused parent vs focused child, focus entered the parent subtree, focus left the parent subtree. Includes label and input elements.

Keyboard event handlers onKeyDown and onKeyUp

Keyboard events include onKeyDown (fires when key is pressed) and onKeyUp (fires when key is released). Both events receive a synthetic event with properties e.key (the key value) and e.code (the physical key code).

Keyboard events example

Example showing onKeyDown and onKeyUp handlers on an input element. Each handler logs e.key and e.code to show the keyboard key value and physical code.

<select> props: onChange

onChange is an Event handler function. It is required for controlled select boxes and fires immediately when the user picks a different option. It behaves like the browser input event.

<select> props: onChangeCapture

onChangeCapture is a version of onChange that fires in the capture phase of event propagation.

<select> props: onInput

onInput is an Event handler function that fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead, which works similarly.

<select> props: onInputCapture

onInputCapture is a version of onInput that fires in the capture phase of event propagation.

<select> props: onInvalid

onInvalid is an Event handler function that fires if an input fails validation on form submit. Unlike the built-in invalid event, the React onInvalid event bubbles.

<select> props: onInvalidCapture

onInvalidCapture is a version of onInvalid that fires in the capture phase of event propagation.

Give your agent this brain