Defining Events in JSX

In the last chapter, in section 4.7, it was explained and demonstrated how events are defined on React nodes. To do the same thing in JSX you add the same camelCased event and the corresponding handler/callback as a prop/attribute of the JSX representing the React node.

Below is the none JSX way of adding an event to a React node (example from Previous chapter, section 4.7):

source code

The above code written using JSX:

source code

Note that we are using the { } brackets to connect a JS function to an event (i.e., onMouseOver={mouseOverHandler}). This style of adding events to nodes mimics the DOM 0 style of inlining events on HTML elements.

React supports the following events and event specific syntheticEvent properties:

Event Type/Category: Events: Event Specific Properties:

Clipboard

onCopy, onCut, onPaste DOMDataTransfer, clipboardData

Composition

onCompositionEnd, onCompositionStart, onCompositionUpdate data

Keyboard

onKeyDown, onKeyPress, onKeyUp altKey, charCode, ctrlKey, getModifierState(key), key, keyCode, locale, location, metaKey, repeat, shiftKey, which

Focus

onChange, onInput, onSubmit DOMEventTarget, relatedTarget

Form

onFocus, onBlur

Mouse

onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave onMouseMove, onMouseOut, onMouseOver, onMouseUp altKey, button, buttons, clientX, clientY, ctrlKey, getModifierState(key), metaKey, pageX, pageY, DOMEventTarget relatedTarget, screenX, screenY, shiftKey,

Selection

onSelect

Touch

onTouchCancel, onTouchEnd, onTouchMove, onTouchStart altKey DOMTouchList changedTouches, ctrlKey, getModifierState(key), metaKey, shiftKey, DOMTouchList targetTouches, DOMTouchList touches,

UI

onScroll detail, DOMAbstractView view

Wheel

onWheel deltaMode, deltaX, deltaY, deltaZ,

Media

onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting

Image

onLoad, onError

Animation

onAnimationStart, onAnimationEnd, onAnimationIteration animationName, pseudoElement, elapsedTime

Transition

onTransitionEnd propertyName, pseudoElement, elapsedTime

Notes

  • React normalizes events so that they behave consistently across different browsers.
  • Events in React are triggered on the bubbling phase. To trigger an event on the capturing phase add the word "Capture" to the event name (e.g., onClick would become onClickCapture).
  • If you need the browser event details for a given event you can access this by using the nativeEvent property found in the SyntheticEvent object passed into React event hander/callbacks.
  • React does not actually attach events to the nodes themselves, it uses event delegation.
  • e.stopPropagation() or e.preventDefault() should be triggered manually to stop event propagation instead of returning false;.
  • Not all DOM events are provided by React. But you can still make use of them using React lifecycle methods.

results matching ""

    No results matching ""