事件系統
虛擬事件對象
事件處理器將會傳入虛擬事件對象的實例,一個對瀏覽器本地事件的跨瀏覽器封裝。它有和瀏覽器本地事件相同的屬性和方法,包括 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 字符串的庫整合。
