5.7 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.14 시점에서, 이벤트 핸들러에서
false를 리턴하는 것은 더 이상 이벤트의 전달(propagation)을 멈추지 않습니다. 대신,e.stopPropagation()나e.preventDefault()로 적절히 수동으로 트리거해야 합니다.
이벤트 풀링
SyntheticEvent는 풀링됩니다. 이는 SyntheticEvent 객체가 재사용될 것이며 이벤트 콜백이 호출된 후 모든 프로퍼티가 null 값을 갖게 된다는 것을 뜻합니다.
이는 성능을 위한 동작입니다.
이 때문에, 비동기 방식으로는 이벤트에 접근할 수 없습니다.
function onClick(event) {
console.log(event); // => null이 된 객체.
console.log(event.type); // => "click"
var eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);
this.setState({clickEvent: event}); // 작동하지 않습니다. this.state.clickEvent 는 null값들만을 갖고 있습니다.
this.setState({eventType: event.type}); // 여전히 이벤트 프로퍼티를 내보낼 수 있습니다.
}
주의:
만약 비동기 방식으로 이벤트 프로퍼티에 접근하길 원한다면, 이벤트의
event.persist()를 호출해야 합니다, 이는 풀로부터 통합적인 이벤트를 제거하고 이벤트에 대한 참조는 사용자의 코드에 의해 유지 될 수 있도록 합니다.
지원되는 이벤트
React는 다른 브라우저에서 일관된 특성을 가지도록 이벤트를 일반화합니다.
밑에 있는 이벤트 핸들러들은 일으키는(bubbling) 단계에서 이벤트를 트리거합니다. 이벤트 핸들러를 캡처 단계로 등록하려면, 이벤트 이름에 Capture를 붙이면 됩니다. 예를 들어, 캡처 단계의 클릭 이벤트를 다루려면 onClick를 사용하는 대신에 onClickCapture를 사용해야 합니다.
클립보드 이벤트
이벤트 이름:
onCopy onCut onPaste
프로퍼티:
DOMDataTransfer clipboardData
Composition Events
이벤트 이름:
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
포커스 이벤트
이벤트 이름:
onFocus onBlur
프로퍼티:
DOMEventTarget relatedTarget
이 포커스 이벤트는 폼 엘리먼트뿐만 아니라 모든 React DOM 엘리먼트에서 작동합니다.
폼 이벤트
이벤트 이름:
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
셀렉션 이벤트
이벤트 이름:
onSelect
터치 이벤트
이벤트 이름:
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
이미지 이벤트
이벤트 이름:
onLoad onError