합성 이벤트(SyntheticEvent)

합성 이벤트(SyntheticEvent)

개요

이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하기 처리하기위해 SyntheticEvent 객체를 전달받습니다. 만약 브라우저의 고유 이벤트가 필요하다면 nativeEvent를 참조하고, 합성 이벤트는 고유 이벤트에 직접 대응되지 않고, 서로 다른 이벤트입니다.

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()는 아무런 동작을 하지 않습니다.

---

지원하는 이벤트

이벤트들은 이벤트 버블링 단계에서 호출되며, 캡쳐링 단계에서 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 Capture를 붙이세요.

---

참조

Clipboard 이벤트

이벤트 이름

• onCopy
• onCut
• onPaste

속성

• DOMDataTransfer
• clipboardData

Composition 이벤트

이벤트 이름

• onCompositionEnd
• onCompositionStart
• onCompositionUpdate

속성

• string
• data

Keyboard 이벤트

이벤트 이름

• 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 이벤트 명세에 있는 어떤 값이든 가질 수 있습니다.

Foucs 이벤트

이벤트 이름

• onFocus
• onBlur

포커스 이벤트는 form 뿐만아니라 모든 React DOM 엘리먼트에 작동합니다.

속성

• DOMEventTarget
• relatedTarget

onFocus

엘리먼트나 자식에서 포커스가 호출되었을 때 호출됩니다.

onBlur

포커스가 사라졌을 때 호출됩니다.

Detecting Focus Entering and Leaving

부모 엘리먼트 바깥 영역으로부터 발생한 이벤트가 포커스인지 또는 블러중인지를 구분하기 위해 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)){
					// 자식들끼리 포커스가 바뀌었을 때는 발생하지 않는다.
				}
			}}
		>
			<input id="1"/>
			<input id="2"/>
		</div>
	);
}

relatedTarget : 그 다음에 포커싱 될 HTML 요소

---

Form 이벤트

이벤트 이름

• onChange
• onInput
• onInvalid : form에 있는 것이 유효한지 검사하는 함수
• onReset
• onSubmit

---

Generic 이벤트

이벤트 이름

• onError
• onLoad

---

Mouse 이벤트

이벤트 이름

• 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 이벤트

이벤트 이름

• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

onPointerEnter 및 onPointerLeave 이벤트는 일반적인 버블링 대신 포인터가 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다.

속성

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

크로스 브라우저 지원 주의사항

포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다. 표준 폴리필은 react-dom번들을 무겁게 만들어 직접 브라우저 호환성을 위해 폴리필을 제공하지 않습니다. 필요하다면 서드 파티 포인터 폴리필을 추가하세요.

---

Selection 이벤트

이벤트 이름

• onSelect

---

Touch 이벤트

이벤트 이름

• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart

속성

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

---

UI 이벤트

이벤트 이름

• onScroll

React 17부터 onScroll 이벤트는 버블링되지 않습니다. 이는 브라우저와 일치하며 스크롤 가능한 엘리먼트가 중첩된 상황에서 자식 엘리먼트가 멀리 떨어져 있는 부모 엘리먼트에 이벤트를 발생시킬 때 가질 수 있는 혼동을 막습니다.

속성

• number detail
• DOMAbstractView view

---

Wheel 이벤트

이벤트 이름

• onWheel

속성

• number deltaMode
• number deltaX
• number deltaY
• number deltaZ

---

Media 이벤트

이벤트 이름

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

---

Image 이벤트

이벤트 이름

• onAnimationStart
• onAnimationEnd
• onAnimationInteration

속성

• string animationName
• string pseudoElement
• float elapsedTime

---

Transition 이벤트

이벤트 이름

• onTransitionEnd

속성

• string propertyName
• string pseudoElement
• float elapsedTime

---

기타 이벤트

이벤트 이름

• onToggle