事件系統

虛擬事件對象

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

轉載于:https://www.cnblogs.com/tomblog/p/4783953.html

總結

以上是生活随笔為你收集整理的react.js 从零开始（五）React 中事件的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。