8000 add define-event-in-jsx.md · learnreactjs/learnreactjs@bd1d761 · GitHub
[go: up one dir, main page]
Skip to content

Commit bd1d761

Browse files
BunlongBunlong
committed
add define-event-in-jsx.md
1 parent 7948c27 commit bd1d761

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

‎content/jsx/define-event-in-jsx.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Defining Events in JSX
2+
3+
In the [previous chapter](/define-react-node-event), it was explained 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.
4+
5+
Below is the none JSX way of adding an event to a React node:
6+
7+
<p data-height="265" data-theme-id="0" data-slug-hash="PedNxy" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="PedNxy" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/PedNxy/">PedNxy</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
8+
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
9+
10+
The above code written using JSX:
11+
12+
<p data-height="265" data-theme-id="dark" data-slug-hash="wjRyQr" da 8000 ta-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="wjRyQr" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/wjRyQr/">wjRyQr</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
13+
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
14+
15+
Note that we are using the `{ }` brackets to connect a JS function to an event (i.e. `onMouseOver={mouseOverHandler}`).
16+
17+
The table below outlines the unique SyntheticEvent properties for each type/category of events.
18+
19+
| Type/Category | Events | Properties |
20+
|:--------------|:-----------------|:-----------------|
21+
| Clipboard | onCopy, onCut, onPaste | DOMDataTransfer, clipboardData |
22+
| Composition | onCompositionEnd, onCompositionStart, onCompositionUpdate | data |
23+
| Keyboard | onKeyDown, onKeyPress, onKeyUp | altKey, charCode, ctrlKey, getModifierState(key), key, keyCode, locale, location, metaKey, repeat, shiftKey, which |
24+
| Focus | onChange, onInput, onSubmit | DOMEventTarget, relatedTarget |
25+
| Form | onFocus, onBlur | |
26+
| 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 |
27+
| Selection | onSelect | |
28+
| Touch | onTouchCancel, onTouchEnd, onTouchMove, onTouchStart | altKey DOMTouchList changedTouches, ctrlKey, getModifierState(key), metaKey, shiftKey, DOMTouchList targetTouches, DOMTouchList touches |
29+
| UI | onScroll | detail, DOMAbstractView view |
30+
| Wheel | onWheel | deltaMode, deltaX, deltaY, deltaZ |
31+
| Media | onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting | |
32+
| Image | onLoad, onError | |
33+
| Animation | onAnimationStart, onAnimationEnd, onAnimationIteration | animationName, pseudoElement, elapsedTime |
34+
| Transition | onTransitionEnd | propertyName, pseudoElement, elapsedTime |
35+
36+
Note:
37+
38+
* Not all DOM events are provided by React. But you can still make use of them [using React lifecycle methods](https://reactjs.org/docs/react-component.html).

0 commit comments

Comments
 (0)
0