事件系統
虛擬事件對象
事件處理器將會傳入虛擬事件對象
的實例,一個對瀏覽器本地事件的跨瀏覽器封裝。它有和瀏覽器本地事件相同的屬性和方法,包括?stopPropagation()
?和?preventDefault()
,但是沒有瀏覽器兼容問題。
如果因為一些因素,需要底層的瀏覽器事件對象,只要使用?nativeEvent
?屬性就可以獲取到它了。每一個虛擬事件對象
都有下列的屬性:
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
?將不會阻止事件冒泡。取而代之的是在合適的應用場景下,手動調用?e.stopPropagation()
?或者?e.preventDefault()
。
支持的事件
React 標準化了事件對象,因此在不同的瀏覽器中都會有相同的屬性。
如下的事件處理器在事件冒泡階段觸發。要在捕獲階段觸發某個事件處理器,在事件名字后面追加?Capture
?字符串;例如,使用?onClickCapture
?而不是?onClick
?來在捕獲階段處理點擊事件。
剪貼板事件
事件名:
onCopy onCut onPaste
屬性:
DOMDataTransfer clipboardData
鍵盤事件:
事件名:
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
焦點事件
事件名:
onFocus onBlur
屬性:
DOMEventTarget relatedTarget
表單事件
事件名:
onChange onInput onSubmit
鼠標事件
事件名:
onClick 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
觸摸事件
為了使觸摸事件生效,在渲染所有組件之前調用?React.initializeTouchEvents(true)
。
事件名:
onTouchCancel onTouchEnd onTouchMove onTouchStart
屬性:
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey function 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
與 DOM 的差異
React 為了性能和跨瀏覽器的原因,實現了一個獨立于瀏覽器的事件和 DOM 系統。利用此功能,可以屏蔽掉一些瀏覽器的 DOM 的粗糙實現。
- 所有 DOM 的 properties 和 attributes (包括事件處理器)應該都是駝峰命名的,以便和標準的 JavaScript 風格保持一致。我們故意和規范不同,因為規范本身就不一致。然而,
data-*
?和?aria-*
?,應該僅是小寫的。 style
?屬性接收一個帶有駝峰命名風格的 JavaScript 對象,而不是一個 CSS 字符串。這與 DOM 中的?style
?的 JavaScript 屬性保持一致,更加有效,并且彌補了 XSS 安全漏洞。- 所有的事件對象和 W3C 規范保持一致,并且所有的事件(包括提交事件)冒泡都正確地遵循 W3C 規范。參考事件系統獲取更多詳細信息。
onChange
?事件表現得和你想要的一樣:當表單字段改變了,該事件就被觸發,而不是等到失去焦點的時候。我們故意和現有的瀏覽器表現得不一致,是因為?onChange
?是它的行為的一個錯誤稱呼,并且 React 依賴于此事件來實時地響應用戶輸入。- 表單輸入屬性,例如?
value
?和?checked
,以及?textarea
。
特殊的非 DOM 屬性
除了與 DOM 的差異之外,React 也提供了一些 DOM 里面不存在的屬性。
key
:可選的唯一的標識器。當組件在渲染
過程中被各種打亂的時候,由于差異檢測邏輯,可能會被銷毀后重新創建。給組件綁定一個 key,可以持續確保組件還存在 DOM 中。dangerouslySetInnerHTML
:提供插入純 HTML 字符串的功能,主要為了能和生成 DOM 字符串的庫整合。