react.js 從零開始(五)React 中事件的用法


事件系統

 

虛擬事件對象

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM