鍍金池/ 教程/ HTML/ 事件系統(tǒng)
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類型
組件的詳細(xì)說(shuō)明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門(mén)
JSX 中的 If-Else
克隆組件
教程
更多的關(guān)于Refs
JSX 的 false 處理
高級(jí)性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡(jiǎn)介
測(cè)試工具集
JSX 陷阱
工具集成(ToolingIntegration)
公開(kāi)組件功能
通過(guò) AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復(fù)用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具(Immutability Helpers)
動(dòng)態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽(tīng)
復(fù)合組件
動(dòng)畫(huà)
插件
JSX 展開(kāi)屬性
行內(nèi)樣式
性能分析工具
類名操作
與其他類庫(kù)并行使用 React
鍵控的片段
標(biāo)簽和屬性支持
組件間的通信
React (虛擬)DOM 術(shù)語(yǔ)
JSX 根節(jié)點(diǎn)的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標(biāo)簽
為什么使用 React?
getInitialState 里的 Props 是一個(gè)反模式
與 DOM 的差異

事件系統(tǒng)

合成事件

事件處理程序通過(guò) 合成事件SyntheticEvent)的實(shí)例傳遞,SyntheticEvent 是瀏覽器原生事件跨瀏覽器的封裝。SyntheticEvent 和瀏覽器原生事件一樣有 stopPropagation()、preventDefault() 接口,而且這些接口夸瀏覽器兼容。

如果出于某些原因想使用瀏覽器原生事件,可以使用 nativeEvent 屬性獲取。每個(gè)和成事件(SyntheticEvent)對(duì)象都有以下屬性:

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 不再停止事件傳播,取而代之,應(yīng)該根據(jù)需要手動(dòng)觸發(fā) e.stopPropagation()e.preventDefault()。

支持的事件

React 將事件統(tǒng)一化,使事件在不同瀏覽器上有一致的屬性。

下面的事件處理程序在事件冒泡階段被觸發(fā)。如果要注冊(cè)事件捕獲處理程序,應(yīng)該使用 Capture 事件,例如使用 onClickCapture 處理點(diǎn)擊事件的捕獲階段,而不是 onClick。

剪貼板事件

事件名稱:

onCopy onCut onPaste

屬性:

DOMDataTransfer clipboardData

鍵盤(pán)事件

事件名稱:

onKeyDown onKeyPress onKeyUp

屬性:

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

焦點(diǎn)事件

事件名稱

onFocus onBlur

屬性:

DOMEventTarget relatedTarget

表單事件

事件名稱:

onChange onInput onSubmit

關(guān)于 onChange 事件的更多信息,參見(jiàn) 表單組件 。

鼠標(biāo)事件

事件名稱:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

屬性:

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

觸控事件

事件名稱:

onTouchCancel onTouchEnd onTouchMove onTouchStart

屬性:

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

用戶界面事件

事件名稱:

onScroll

屬性:

Number detail
DOMAbstractView view

滾輪事件

事件名稱:

onWheel

屬性:

Number deltaMode
Number deltaX
Number deltaY
Number deltaZ