We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

SyntheticEvent

ืžื“ืจื™ืš ืขื–ืจ ื–ื” ืžืกื‘ื™ืจ ืขืœ ืžืขื˜ืคืช ื”-SyntheticEvent ื”ืžื”ื•ื•ื” ื—ืœืง ืžืžืขืจื›ืช ื”ืื™ืจื•ืขื™ื ืฉืœ React. ืจืื” ืืช ืžื“ืจื™ืš ื˜ื™ืคื•ืœ ื‘ืื™ืจื•ืขื™ื ืขืœ ืžื ืช ืœืœืžื•ื“ ืขื•ื“.

ืกืงื™ืจื” ื›ืœืœื™ืช

ืžื˜ืคืœื™ ื”ืื™ืจื•ืขื™ื ืฉืœืš ืžืงื‘ืœื™ื ืžื•ืคืขื™ื ืฉืœ SyntheticEvent, ืžืขื˜ืคืช ืชืื™ืžื•ืช ื‘ื™ืŸ ื“ืคื“ืคื ื™ื ืžืกื‘ื™ื‘ ืœืื™ืจื•ืข ื”ืžืงื•ืจื™ ืฉืœ ื”ื“ืคื“ืคืŸ. ื™ืฉ ืœื” ืืช ืื•ืชื• ืžืžืฉืง ื›ืžื• ื”ืื™ืจื•ืข ื”ืžืงื•ืจื™, ื›ื•ืœืœ stopPropagation() ื•-preventDefault(), ืœืžืขื˜ ื–ื” ืฉื”ืื™ืจื•ืขื™ื ืขื•ื‘ื“ื™ื ื‘ืื•ืคืŸ ื–ื”ื” ื‘ื™ืŸ ื›ืœ ื”ื“ืคื“ืคื ื™ื.

ืื ืืชื” ืžื’ืœื” ืฉืืชื” ื–ืงื•ืง ืœืื™ืจื•ืข ื”ื“ืคื“ืคืŸ ื”ื‘ืกื™ืกื™ ืžืกื™ื‘ื” ื›ืœืฉื”ื™, ืคืฉื•ื˜ ื”ืฉืชืžืฉ ื‘ืžืืคื™ื™ืŸ nativeEvent ืขืœ ืžื ืช ืœืงื‘ืœ ืื•ืชื•. ื”ืื™ืจื•ืขื™ื ื”ืกื™ื ื˜ื˜ื™ื™ื ืฉื•ื ื™ื ื•ืœื ืžืžืคื™ื ืœืื™ืจื•ืขื™ื ืฉืœ ื”ื“ืคื“ืคืŸ. ืœื“ื•ื’ืžื” ื‘onMouseLeave, ื”ืื™ืจื•ืข event.nativeEvent ื™ืฆื‘ื™ืข ืขืœ ื”ืื™ืจื•ืข mouseout. ื”ืžื™ืคื•ื™ ื”ืกืคืฆื™ืคื™ ื”ื•ื ืœื ื—ืœืง ืžื”public API ื•ื™ื›ื•ืœ ืœื”ืฉืชื ื•ืช ื‘ื›ืœ ื–ืžืŸ. ื›ืœ ืื•ื‘ื™ื™ืงื˜ SyntheticEvent ืžื›ื™ืœ ืืช ื”ืชื›ื•ื ื•ืช ื”ื‘ืื•ืช:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

ื”ืขืจื”:

ืžื’ืจืกื” v17, ืฉื™ืžื•ืฉ ื‘- e.persist() ืœื ืขื•ืฉื” ื›ืœื•ื ื‘ื’ืœืœ ืฉื”- SyntheticEvent ืœื ืžืฆื•ืจืฃ ื™ื•ืชืจ.

ื”ืขืจื”:

ื ื›ื•ืŸ ืœื’ืจืกื” v0.14, ื”ื—ื–ืจืช false ืž-event handler ื™ื•ืชืจ ืœื ื™ืคืกื™ืง ื”ืชืจื‘ื•ืช event. ื‘ืžืงื•ื ื–ืืช, e.stopPropagation() ืื• e.preventDefault() ืืžื•ืจื™ื ืœืคืขื•ืœ ื™ื“ื ื™ืช, ื›ืจืื•ื™.

ืื™ืจื•ืขื™ื ื ืชืžื›ื™ื

React ืžื ืจืžืœืช ืื™ืจื•ืขื™ื ื›ืš ืฉื™ื”ื™ื• ืœื”ื ืžืืคื™ื™ื ื™ื ืขืงื‘ื™ื™ื ื‘ื™ืŸ ื“ืคื“ืคื ื™ื ืฉื•ื ื™ื.

ืžื˜ืคืœื™ ื”ืื™ืจื•ืขื™ื ืฉืœื”ืœืŸ ืžื•ืคืขืœื™ื ืขืœ ื™ื“ื™ ืื™ืจื•ืข ื‘ืฉืœื‘ ื”ื‘ืขื‘ื•ืข. ืขืœ ืžื ืช ืœืจืฉื•ื ืžื˜ืคืœ ืื™ืจื•ืขื™ื ืœืฉืœื‘ ื”ืœื›ื™ื“ื”, ื”ื•ืกืฃ Capture ืœืฉื ื”ืื™ืจื•ืข; ืœื“ื•ื’ืžื”, ื‘ืžืงื•ื ืฉื™ืžื•ืฉ ื‘-onClick, ืขืœื™ืš ืœื”ืฉืชืžืฉ ื‘-onClickCapture ืขืœ ืžื ืช ืœื˜ืคืœ ื‘ืื™ืจื•ืข ื”ื”ืงืœืงื” ื‘ืฉืœื‘ ื”ืœื›ื™ื“ื”.


ืกื™ืžื•ื›ื™ืŸ

ืื™ืจื•ืขื™ clipboard

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onCopy onCut onPaste

ืžืืคื™ื™ื ื™ื:

DOMDataTransfer clipboardData

ืื™ืจื•ืขื™ ืงื•ืžืคื•ื–ื™ืฆื™ื”

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onCompositionEnd onCompositionStart onCompositionUpdate

ืžืืคื™ื™ื ื™ื:

string data

ืื™ืจื•ืขื™ ืžืงืœื“ืช

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onKeyDown onKeyPress onKeyUp

ืžืืคื™ื™ื ื™ื:

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

ืžืืคื™ื™ืŸ ื”-key ื™ื›ื•ืœ ืœืงื‘ืœ ื›ืœ ืขืจืš ืฉืžืชื•ืขื“ ื‘ืžืคืจื˜ ืื™ืจื•ืขื™ ื”-DOM ื‘ืฉืœื‘ 3.


ืื™ืจื•ืขื™ ืคื•ืงื•ืก

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onFocus onBlur

ืื™ืจื•ืขื™ ื”ืคื•ืงื•ืก ื”ืœืœื• ืขื•ื‘ื“ื™ื ืขืœ ื›ืœ ื”ืืœืžื ื˜ื™ื ื‘-DOM ืฉืœ React, ืœื ืจืง ืืœืžื ื˜ื™ ื˜ืคืกื™ื.

ืžืืคื™ื™ื ื™ื:

DOMEventTarget relatedTarget

onFocus

ื ืงืจื ืœ-onFocus ื›ืฉื”ืืœืžื ื˜ (ืื• ืืœืžื ื˜ ื›ืœืฉื”ื• ื‘ืชื•ื›ื•) ืžืงื‘ืœ ืคื•ืงื•ืก. ืœื“ื•ื’ืžื”, ื ืงืจื ืœื• ื›ืฉื”ืžืฉืชืžืฉ ืœื•ื—ืฅ ืขืœ ืงืœื˜ ื˜ืงืกื˜.

function Example() {
  return (
    <input
      onFocus={(e) => {
        console.log('Focused on input');
      }}
      placeholder="onFocus is triggered when you click this input."
    />
  )
}

onBlur

ื ืงืจื ืœ-onBlur ื›ืฉื”ืคื•ืงื•ืก ืขื–ื‘ ืืช ื”ืืœืžื ื˜ (ืื• ืืœืžื ื˜ ื›ืœืฉื”ื• ื‘ืชื•ื›ื•). ืœื“ื•ื’ืžื”, ื ืงืจื ืœื• ื›ืฉื”ืžืฉืชืžืฉ ืœื•ื—ืฅ ืขืœ ื ืงื•ื“ื” ืžื—ื•ืฅ ืœืงืœื˜ ื”ื˜ืงืกื˜ ืฉื‘ืคื•ืงื•ืก.

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onBlur is triggered when you click this input and then you click outside of it."
    />
  )
}

ื–ื™ื”ื•ื™ ื›ื ื™ืกื” ื•ื™ืฆื™ืื” ืฉืœ ืคื•ืงื•ืก

ื ื™ืชืŸ ืœื”ืฉืชืžืฉ ื‘-currentTarget ื•ื‘-relatedTarget ืœื”ื‘ื“ื™ืœ ืื ืžืงื•ืจื ืฉืœ ืื™ืจื•ืขื™ ื”ืคื•ืงื•ืก ืื• ื”ื˜ืฉื˜ื•ืฉ ืžื—ื•ืฅ ืœืืœืžื ื˜ ื”ื”ื•ืจื”. ื”ื ื” ื“ืžื• ืฉืชื•ื›ืœ ืœื”ืขืชื™ืง ื•ืœื”ื“ื‘ื™ืง ืฉืžืจืื” ืื™ืš ืœื–ื”ื•ืช ืคื•ืงื•ืก ืขืœ ืืœืžื ื˜ ืฆืืฆื, ืคื•ืงื•ืก ืขืœ ื”ืืœืžื ื˜ ืขืฆืžื•, ื•ืคื•ืงื•ืก ื›ืฉื ื›ื ืกื™ื ืื• ืขื•ื–ื‘ื™ื ืืช ื›ืœ ื”ืชืช-ืขืฅ.

function Example() {
  return (
    <div
      tabIndex={1}
      onFocus={(e) => {
        if (e.currentTarget === e.target) {
          console.log('focused self');
        } else {
          console.log('focused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // ืœื ืžื•ืคืขืœ ื›ืฉืžื—ืœื™ืคื™ื ืคื•ืงื•ืก ื‘ื™ืŸ ื™ืœื“ื™ื
          console.log('focus entered self');
        }
      }}
      onBlur={(e) => {
        if (e.currentTarget === e.target) {
          console.log('unfocused self');
        } else {
          console.log('unfocused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // ืœื ืžื•ืคืขืœ ื›ืฉืžื—ืœื™ืคื™ื ืคื•ืงื•ืก ื‘ื™ืŸ ื™ืœื“ื™ื
          console.log('focus left self');
        }
      }}
    >
      <input id="1" />
      <input id="2" />
    </div>
  );
}

ืื™ืจื•ืขื™ ื˜ืคืกื™ื

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onChange onInput onInvalid onReset onSubmit 

ืœืงื‘ืœืช ืžื™ื“ืข ื ื•ืกืฃ ืขืœ ืื™ืจื•ืข ื”-onChange, ืจืื” ื˜ืคืกื™ื.


ืื™ืจื•ืขื™ื™ื ื’ื ืจื™ื™ื

Event names:

onError onLoad

ืื™ืจื•ืขื™ ืขื›ื‘ืจ

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

ืื™ืจื•ืขื™ ื”-onMouseEnter ื•-onMouseLeave ืžื•ืคืฆื™ื ืžื”ืืœืžื ื˜ ืฉื”ืขื›ื‘ืจ ืขื–ื‘ ืืœ ื”ืืœืžื ื˜ ืฉืืœื™ื• ื”ืขื›ื‘ืจ ื ื›ื ืก ื‘ืžืงื•ื ื‘ืขื‘ื•ืข ืจื’ื™ืœ ื•ืื™ืŸ ืœื”ื ืฉืœื‘ ืœื›ื™ื“ื”.

ืžืืคื™ื™ื ื™ื:

boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

ืื™ืจื•ืขื™ ืžืฆื‘ื™ืข

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

ืื™ืจื•ืขื™ ื”-onPointerEnter ื•-onPointerLeave ืžื•ืคืฆื™ื ืžื”ืืœืžื ื˜ ืฉื”ืขื›ื‘ืจ ืขื–ื‘ ืืœ ื”ืืœืžื ื˜ ืฉืืœื™ื• ื”ืขื›ื‘ืจ ื ื›ื ืก ื‘ืžืงื•ื ื‘ืขื‘ื•ืข ืจื’ื™ืœ ื•ืื™ืŸ ืœื”ื ืฉืœื‘ ืœื›ื™ื“ื”.

ืžืืคื™ื™ื ื™ื:

ื›ืžื• ืฉื”ื•ื’ื“ืจ ื‘-W3 spec, ืื™ืจื•ืขื™ ืžืฆื‘ื™ืข ืžืจื—ื™ื‘ื™ื ืื™ืจื•ืขื™ ืขื›ื‘ืจ ืขื ื”ืžืืคื™ื™ื ื™ื ื”ื‘ืื™ื:

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

ื”ืขืจื” ืœื’ื‘ื™ ืชืžื™ื›ื” ื‘ื“ืคื“ื ื™ื:

ืื™ืจื•ืขื™ ืžืฆื‘ื™ืข ืขื“ื™ื™ืŸ ืœื ื ืชืžื›ื™ื ื‘ื›ืœ ื”ื“ืคื“ืคื ื™ื (ื‘ื–ืžืŸ ื›ืชื™ื‘ืช ืžืืžืจ ื–ื”, ื”ื“ืคื“ื ื™ื ื”ื ืชืžื›ื™ื ื”ื: Chrome, Firefox, Edge, ื•-Internet Explorer). ื‘ืื•ืคืŸ ืžื›ื•ื•ืŸ React ืœื ืžืžืžืฉืช polyfill ืœืชืžื™ื›ื” ื‘ื“ืคื“ืคื ื™ื ืื—ืจื™ื ื›ื™ polyfill ืชืื™ืžื•ืช ืกื˜ื ื“ืจื˜ื™ืช ื™ื’ื“ื™ืœ ืžืฉืžืขื•ืชื™ืช ืืช ื’ื•ื“ืœ ื”ื‘ืื ื“ืœ ืฉืœ react-dom.

ืื ื”ืืคืœื™ืงืฆื™ื™ื” ืฉืœืš ื“ื•ืจืฉืช ืื™ืจื•ืขื™ ืžืฆื‘ื™ืข, ืื ื• ืžืžืœื™ืฆื™ื ืฉืชื•ืกื™ืฃ polyfill ืื™ืจื•ืขื™ ืžืฆื‘ื™ืข ืžืฆื“ ืฉืœื™ืฉื™.


ืื™ืจื•ืขื™ ื‘ื—ื™ืจื”

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onSelect

ืื™ืจื•ืขื™ ื˜ืืฅโ€™

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onTouchCancel onTouchEnd onTouchMove onTouchStart

ืžืืคื™ื™ื ื™ื:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

ืื™ืจื•ืขื™ ืžืžืฉืง ืžืฉืชืžืฉ

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onScroll

ื”ืขืจื”

ื”ื—ืœ ืžื’ืจืกื” 17, onScroll ืœื ืžื‘ืขื‘ืข ื‘ืจื™ืืงื˜. ื–ื” ืชื•ืื ืืช ื”ืชื ื”ื’ื•ืช ื”ื“ืคื“ืคืŸ ื•ืžื•ื ืข ื‘ืœื‘ื•ืœ ื›ืฉืชืช ืืœืžื ื˜ ืฉื”ื•ื scrollable ื™ื•ืจื” events ืขืœ ื”ื•ืจื” ืจื—ื•ืง.

ืžืืคื™ื™ื ื™ื:

number detail
DOMAbstractView view

ืื™ืจื•ืขื™ ื’ืœื’ืœ

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onWheel

ืžืืคื™ื™ื ื™ื:

number deltaMode
number deltaX
number deltaY
number deltaZ

ืื™ืจื•ืขื™ ืžื“ื™ื”

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

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

ืื™ืจื•ืขื™ ืชืžื•ื ื”

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onLoad onError

ืื™ืจื•ืขื™ ืื ื™ืžืฆื™ื”

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onAnimationStart onAnimationEnd onAnimationIteration

ืžืืคื™ื™ื ื™ื:

string animationName
string pseudoElement
float elapsedTime

ืื™ืจื•ืขื™ ืžืขื‘ืจ

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onTransitionEnd

ืžืืคื™ื™ื ื™ื:

string propertyName
string pseudoElement
float elapsedTime

ืื™ืจื•ืขื™ื ืื—ืจื™ื

ืฉืžื•ืช ืื™ืจื•ืขื™ื:

onToggle