React 이벤트 처리 종류

Clipboard Events

이벤트 이름 :onCopy onCut onPaste

속성 : DOMDataTransfer clipboardData

 

 

Composition Events

이벤트 이름 : onCompositionEnd onCompositionStart onCompositionUpdate

속성 : string data

 

 

Keyboard Events

이벤트 이름 :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 Level 3 Events spec에 설명 된 값 중 하나를 사용할 수 있습니다 .

 

 

Focus Events

이벤트 이름 :onFocus onBlur

이러한 포커스 이벤트는 폼 요소뿐만 아니라 React DOM의 모든 요소에서 작동합니다.

속성 : DOMEventTarget relatedTarget

 

 

Form Events

이벤트 이름 : onChange onInput onInvalid onSubmit

onChange 이벤트에 대한 자세한 정보는 양식을 참조하십시오 .

 

 

Mouse Events

이벤트 이름 :

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

 

 

Pointer Events

이벤트 이름 :

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는 의도적으로 다른 브라우저에 대한 지원을 폴리 필하지 않습니다 react-dom.

응용 프로그램에 포인터 이벤트가 필요한 경우 타사 포인터 이벤트 폴리 필을 추가하는 것이 좋습니다.

 

 

Selection Events

이벤트 이름 : onSelect

 

 

Touch Events

이벤트 이름 : onTouchCancel onTouchEnd onTouchMove onTouchStart

속성 :

boolean altKey

DOMTouchList changedTouches

boolean ctrlKey

boolean getModifierState(key)

boolean metaKey

boolean shiftKey

DOMTouchList targetTouches

DOMTouchList touches

 

 

UI Events

이벤트 이름 : onScroll

속성 :

number detail

DOMAbstractView view

 

 

onScroll

이벤트 이름 : onWheel

속성 :

number deltaMode

number deltaX

number deltaY

number deltaZ

 

 

Media Events

이벤트 이름 :

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted

onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay

onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend

onTimeUpdate onVolumeChange onWaiting

 

 

Image Events

이벤트 이름 :onLoad onError

 

 

Animation Events

이벤트 이름 : onAnimationStart onAnimationEnd onAnimationIteration

속성 :

string animationName

string pseudoElement

float elapsedTime

 

 

Transition Events

이벤트 이름 : onTransitionEnd

속성 :

string propertyName

string pseudoElement

float elapsedTime

 

 

Other Events

이벤트 이름 :onToggle