Shim Won
10 years ago
committed by
Jay Jaeho Lee
1 changed files with 195 additions and 0 deletions
@ -0,0 +1,195 @@ |
|||
--- |
|||
id: events-ko-KR |
|||
title: 이벤트 시스템 |
|||
permalink: events.ko-KR.html |
|||
prev: tags-and-attributes.ko-KR.html |
|||
next: dom-differences.ko-KR.html |
|||
--- |
|||
|
|||
## 통합적인(Synthetic) 이벤트 |
|||
|
|||
이벤트 핸들러는 브라우저의 네이티브 이벤트의 크로스 브라우저 래퍼인`SyntheticEvent`의 인스턴스에 전달됩니다. 모든 브라우저에서 동작한다는 점을 제외하면, `SyntheticEvent`는 `stopPropagation()`나 `preventDefault()`를 포함해, 브라우저의 네이티브 이벤트와 같은 인터페이스를 가지고 있습니다. |
|||
|
|||
어떤 이유로 기본 브라우저 이벤트가 필요하다면, 그냥 `nativeEvent`를 사용해 할 수 있습니다. 모든 `SyntheticEvent` 객체는 이런 어트리뷰트를 가집니다. |
|||
|
|||
```javascript |
|||
boolean bubbles |
|||
boolean cancelable |
|||
DOMEventTarget currentTarget |
|||
boolean defaultPrevented |
|||
number eventPhase |
|||
boolean isTrusted |
|||
DOMEvent nativeEvent |
|||
void preventDefault() |
|||
void stopPropagation() |
|||
DOMEventTarget target |
|||
number timeStamp |
|||
string type |
|||
``` |
|||
|
|||
> 주의: |
|||
> |
|||
> v0.12 시점에서, 이벤트 핸들러에서 `false` 를 리턴하는 것은 더 이상 이벤트의 전달(propagation)을 멈추지 않습니다. 대신, `e.stopPropagation()`나 `e.preventDefault()`로 적절히 수동으로 트리거해야 합니다. |
|||
|
|||
|
|||
## 지원되는 이벤트 |
|||
|
|||
React는 다른 브라우저에서 일관된 특성을 가지도록 이벤트를 일반화합니다. |
|||
|
|||
밑에 있는 이벤트 핸들러들은 일으키는(bubbling) 단계에서 이벤트를 트리거합니다. 이벤트 핸들러를 캡처 단계로 등록하려면, 이벤트 이름에 `Capture`를 붙이면 됩니다. 예를 들어, 캡처 단계의 클릭 이벤트를 다루려면 `onClick`를 사용하는 대신에 `onClickCapture`를 사용해야 합니다. |
|||
|
|||
|
|||
### 클립보드 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onCopy onCut onPaste |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
DOMDataTransfer clipboardData |
|||
``` |
|||
|
|||
|
|||
### 키보드 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onKeyDown onKeyPress onKeyUp |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
boolean altKey |
|||
Number charCode |
|||
boolean ctrlKey |
|||
function getModifierState(key) |
|||
String key |
|||
Number keyCode |
|||
String locale |
|||
Number location |
|||
boolean metaKey |
|||
boolean repeat |
|||
boolean shiftKey |
|||
Number which |
|||
``` |
|||
|
|||
|
|||
### 포커스 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onFocus onBlur |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
DOMEventTarget relatedTarget |
|||
``` |
|||
|
|||
|
|||
### 폼 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onChange onInput onSubmit |
|||
``` |
|||
|
|||
onChange 이벤트에 대한 더 자세한 정보는 [폼](/react/docs/forms.html)에서 확인하세요. |
|||
|
|||
|
|||
### 마우스 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave |
|||
onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave |
|||
onMouseMove onMouseOut onMouseOver onMouseUp |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
boolean altKey |
|||
Number button |
|||
Number buttons |
|||
Number clientX |
|||
Number clientY |
|||
boolean ctrlKey |
|||
function getModifierState(key) |
|||
boolean metaKey |
|||
Number pageX |
|||
Number pageY |
|||
DOMEventTarget relatedTarget |
|||
Number screenX |
|||
Number screenY |
|||
boolean shiftKey |
|||
``` |
|||
|
|||
|
|||
### 터치 이벤트 |
|||
|
|||
터치 이벤트를 활성화 하려면, 컴포넌트를 렌더하기 전에 |
|||
`React.initializeTouchEvents(true)`를 호출하세요. |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onTouchCancel onTouchEnd onTouchMove onTouchStart |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
boolean altKey |
|||
DOMTouchList changedTouches |
|||
boolean ctrlKey |
|||
function getModifierState(key) |
|||
boolean metaKey |
|||
boolean shiftKey |
|||
DOMTouchList targetTouches |
|||
DOMTouchList touches |
|||
``` |
|||
|
|||
|
|||
### UI 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onScroll |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
Number detail |
|||
DOMAbstractView view |
|||
``` |
|||
|
|||
|
|||
### 휠 이벤트 |
|||
|
|||
이벤트 이름: |
|||
|
|||
``` |
|||
onWheel |
|||
``` |
|||
|
|||
프로퍼티: |
|||
|
|||
```javascript |
|||
Number deltaMode |
|||
Number deltaX |
|||
Number deltaY |
|||
Number deltaZ |
|||
``` |
Loading…
Reference in new issue