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 字符串的庫整合。

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/375564.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/375564.shtml
英文地址,請注明出處:http://en.pswp.cn/news/375564.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

乘積的最大子數組

給你一個整數數組 nums ,請你找出數組中乘積最大的連續子數組(該子數組中至少包含一個數字),并返回該子數組所對應的乘積。 示例 1: 輸入: [2,3,-2,4] 輸出: 6 解釋: 子數組 [2,3] 有最大乘積 6。示例 2: 輸入: [-2,0,-1] 輸出…

javascript new

1. 僅function可以使用new 2. function使用new時,會拷貝function中this的內容給新對象,并將function的prototype指向新對象(如果該function沒有prototype,則指向Object的prototype) 注:function本身不是Obj…

!+\v1 用來“判斷瀏覽器類型”還是用來“IE判斷版本”的問題!

這種寫法是利用各瀏覽器對轉義字符"\v"的理解不同來判斷瀏覽器類型。在IE中,"\v"沒有轉義,得到的結果為"v"。而在其他瀏覽器中"\v"表示一個垂直制表符,所以ie解析的"\v1" 為 "v1&quo…

三個數的最大乘積

給定一個整型數組,在數組中找出由三個數組成的最大乘積,并輸出這個乘積。 示例 1: 輸入: [1,2,3] 輸出: 6示例 2: 輸入: [1,2,3,4] 輸出: 24注意: 給定的整型數組長度范圍是[3,104],數組中所有的元素范圍是[-1000, 1000]。 輸入的數組中任…

VB.NET 數組的定義 動態使用 多維數組

我們都知道在全部程序設計語言中數組都是一個非常重要的概念,數組的作用是同意程序猿用同一個名稱來引用多個變量,因此採用數組索引來區分這些變量。非常多情況下利用數組索引來設置一個循環,這樣就能夠高效地處理復雜的情況,因此…

web.xml 中的listener、 filter、servlet 加載順序

1:首先是context-param節點 2:接著配置和調用listeners 并開始監聽 3:然后配置和調用filters filters開始起作用 4:最后加載和初始化配置在load on startup的servlets轉載于:https://www.cnblogs.com/dwchenxj/p/4787717.html

這么多個月,我頭一次體驗用類的概念來寫驅動

原來感覺一樣是那么爽阿。。。快樂得不得了。。。轉載于:https://www.cnblogs.com/suanguade/p/4038190.html

設置Chrome忽略網站證書錯誤

本人在XP下使用Chrome。總是莫名其妙的提示整數錯誤,一部分https網站無法直接訪問。網上找了下,把解決思路記錄下來。 解決這個問題很簡單,只需要修改你平時用來啟動Chrome的快捷方式就可以忽略掉證書錯誤. 具體的操作方法是這樣的: 找到你的Chrome快捷方…

Android開發之合并文件的幾種方式

以下介紹合并文件的幾種方式,并通過合并amr文件來舉例介紹合并文件的詳細流程。amr格式的文件頭是6字節,所以在進行文件合并的時候要減去除第一個文件以外的其它文件的文件頭。 注意:不同文件的文件頭是不一樣的,所以在合并的時候…

數組中出現次數超過一半的數

數組中有一個數字出現的次數超過數組長度的一半&#xff0c;請找出這個數字。 你可以假設數組是非空的&#xff0c;并且給定的數組總是存在多數元素。 示例 1: 輸入: [1, 2, 3, 2, 2, 2, 5, 4, 2] 輸出: 2限制&#xff1a; 1 < 數組長度 < 50000class Solution { pub…

中國寒龍反網絡病毒聯盟核心小組:官方公告,近期本站將會發布各種編程技術視頻教程,詳情請點擊我們的以下公告!...

大家好&#xff0c;我是中國寒反網絡病毒聯盟官方客服&#xff01; 近期&#xff0c;本站將全面升級&#xff0c;本站發布各種編程視頻教程&#xff0c;包括C,c#以及VB&#xff0c;VB.net&#xff0c;E&#xff0c;等相關編程語言入門視頻教程&#xff0c;每天會定期更新視頻教…

javascript學習-原生javascript的小特效(多個運動效果整理)

以下代碼就不詳細解析了&#xff0c;在我之前的多個運動效果中已經解析好多次了&#xff0c;重復的地方這里就不說明了&#xff0c;有興趣的童鞋可以去看看之前的文章《原生javascript的小特效》 <!DOCTYPE HTML> <html lang"en-US"> <head> <m…

linux在指定目錄多個文件中搜索關鍵字

find 文件目錄 -name *.* -exec grep xxx {} -n\;# -n顯示行號find 文件目錄 -name *.* | xargs grep xxx -ngrep xxx 文件目錄 -Rngrep xxx find 文件目錄 -name *.*

$ npm install opencv ? 你試試?! 在windows環境下,使用node.js調用opencv攻略

博主之前寫過一篇文章《html5與EmguCV前后端實現——人臉識別篇》&#xff0c;敘述的是opencv和C#的故事。最近在公司服務器上更新了一套nodejs環境&#xff0c;早就聽聞npm上有opencv模塊&#xff0c;便欲部署之。然而opencv的部署似乎從來都不會那么順利...... 找模塊上https…

android學習——GestureDetector.OnGestureListener 詳解

Android Touch Screen 與傳統Click Touch Screen不同&#xff0c;會有一些手勢(Gesture)&#xff0c;例如Fling&#xff0c;Scroll等等。這些Gesture會使用戶體驗大大提升。Android中的Gesture識別(detector)是通過GestureDetector.OnGestureListener接口實現的。 首先&#xf…

關于安卓一鍵分享的,急求幫助!

問題描述現在要做一個項目&#xff0c;設置里面點擊一個按鈕就可以分享&#xff0c;有三個分享平臺&#xff0c;新浪微博&#xff0c;微信和微信朋友圈現在的問題是我要在三個平臺分享的內容不同&#xff0c;在新浪微博中分享的是一段文字敘述和一個網頁鏈接&#xff1b;而在微…

和可被 K 整除的子數組

給定一個整數數組 A&#xff0c;返回其中元素之和可被 K 整除的&#xff08;連續、非空&#xff09;子數組的數目。 示例&#xff1a; 輸入&#xff1a;A [4,5,0,-2,-3,1], K 5 輸出&#xff1a;7 解釋&#xff1a; 有 7 個子數組滿足其元素之和可被 K 5 整除&#xff1a;…

前端進階路線圖

CSS不能編程&#xff1f;用Less、Sass、Stylus、甚至直接用 Absurd&#xff0c;框架除了Bootstrap還有很多。JS寫多了很麻煩&#xff1f;jQuery。移動開發&#xff1f;Zepto.js。結構不好&#xff1f;找框架&#xff0c;Backbone.js是MVC&#xff0c;AngularJS和Ember.js是MVVM…

流媒體直播服務LSS

流媒體直播服務LSS posted on 2014-10-22 11:23 實驗室 閱讀(...) 評論(...) 編輯 收藏 轉載于:https://www.cnblogs.com/labs/p/4042641.html

Win7安裝vs2010失敗

提示&#xff1a; --------------------------------------------------------------------------------------------------------------------------------------- 解決方法&#xff1a;開始運行中regedit打開注冊表找到HKEY_LOCAL_MACHINE/System/CurrentControlSet/Control …