minwe
10 years ago
1 changed files with 194 additions and 0 deletions
@ -0,0 +1,194 @@ |
|||||
|
--- |
||||
|
id: events-zh-CN |
||||
|
title: 事件系统 |
||||
|
permalink: events-zh-CN.html |
||||
|
prev: tags-and-attributes-zh-CN.html |
||||
|
next: dom-differences-zh-CN.html |
||||
|
--- |
||||
|
|
||||
|
## 合成事件 |
||||
|
|
||||
|
事件处理程序通过 `合成事件`(`SyntheticEvent`)的实例传递,`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 |
||||
|
Date timeStamp |
||||
|
String type |
||||
|
``` |
||||
|
|
||||
|
> 注意: |
||||
|
> |
||||
|
> React v0.12 中,事件处理程序返回 `false` 不再停止事件传播,取而代之,应该根据需要手动触发 `e.stopPropagation()` 或 `e.preventDefault()`。 |
||||
|
|
||||
|
|
||||
|
## 支持的事件 |
||||
|
|
||||
|
React 将事件统一化,使事件在不同浏览器上有一致的属性。 |
||||
|
|
||||
|
下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序,应该使用 `Capture` 事件,例如使用 `onClickCapture` 处理点击事件的捕获阶段,而不是 `onClick`。 |
||||
|
|
||||
|
|
||||
|
### 剪贴板事件 |
||||
|
|
||||
|
事件名称: |
||||
|
|
||||
|
``` |
||||
|
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-zh-CN.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 |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
### 用户界面事件 |
||||
|
|
||||
|
事件名称: |
||||
|
|
||||
|
``` |
||||
|
onScroll |
||||
|
``` |
||||
|
|
||||
|
属性: |
||||
|
|
||||
|
```javascript |
||||
|
Number detail |
||||
|
DOMAbstractView view |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
### 滚轮事件 |
||||
|
|
||||
|
事件名称: |
||||
|
|
||||
|
``` |
||||
|
onWheel |
||||
|
``` |
||||
|
|
||||
|
属性: |
||||
|
|
||||
|
```javascript |
||||
|
Number deltaMode |
||||
|
Number deltaX |
||||
|
Number deltaY |
||||
|
Number deltaZ |
||||
|
``` |
Loading…
Reference in new issue