4.2 KiB
| id | title | permalink | prev | next |
|---|---|---|---|---|
| events-ko-KR | 이벤트 시스템 | events-ko-KR.html | tags-and-attributes-ko-KR.html | dom-differences-ko-KR.html |
통합적인(Synthetic) 이벤트
이벤트 핸들러는 브라우저의 네이티브 이벤트의 크로스 브라우저 래퍼(wrapper)인SyntheticEvent의 인스턴스에 전달됩니다. 모든 브라우저에서 동작한다는 점을 제외하면, SyntheticEvent는 stopPropagation()나 preventDefault()를 포함해, 브라우저의 네이티브 이벤트와 같은 인터페이스를 가지고 있습니다.
어떤 이유로 기본 브라우저 이벤트가 필요하다면, 그냥 nativeEvent를 사용해 할 수 있습니다. 모든 SyntheticEvent 객체는 이런 어트리뷰트를 가집니다.
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type
주의:
v0.12 시점에서, 이벤트 핸들러에서
false를 리턴하는 것은 더 이상 이벤트의 전달(propagation)을 멈추지 않습니다. 대신,e.stopPropagation()나e.preventDefault()로 적절히 수동으로 트리거해야 합니다.
지원되는 이벤트
React는 다른 브라우저에서 일관된 특성을 가지도록 이벤트를 일반화합니다.
밑에 있는 이벤트 핸들러들은 일으키는(bubbling) 단계에서 이벤트를 트리거합니다. 이벤트 핸들러를 캡처 단계로 등록하려면, 이벤트 이름에 Capture를 붙이면 됩니다. 예를 들어, 캡처 단계의 클릭 이벤트를 다루려면 onClick를 사용하는 대신에 onClickCapture를 사용해야 합니다.
클립보드 이벤트
이벤트 이름:
onCopy onCut onPaste
프로퍼티:
DOMDataTransfer clipboardData
키보드 이벤트
이벤트 이름:
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
포커스 이벤트
이벤트 이름:
onFocus onBlur
프로퍼티:
DOMEventTarget relatedTarget
폼 이벤트
이벤트 이름:
onChange onInput onSubmit
onChange 이벤트에 대한 더 자세한 정보는 폼에서 확인하세요.
마우스 이벤트
이벤트 이름:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
onMouseEnter와 onMouseLeave 이벤트는 평범하게 일어나는(bubbling) 대신 입력된 컴포넌트에 남겨지도록 컴포넌트에서 전달되고 캡쳐 단계가 없습니다.
프로퍼티:
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
터치 이벤트
이벤트 이름:
onTouchCancel onTouchEnd onTouchMove onTouchStart
프로퍼티:
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches
UI 이벤트
이벤트 이름:
onScroll
프로퍼티:
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