React.js學習筆記之事件系統

時間 2019-11-06

原文原文鏈接

React.js學習筆記之事件系統

@(React學習)javascript

事件系統

React 標準化了事件對象，所以在不一樣的瀏覽器中都會有相同的屬性。html

組件createClass後建立的是許多方法組成的對象。組件中使用的方法分爲React自有的方法與用戶定義的方法。其中React自有方法是組件生命週期中的方法，如：render、componentWillUpdate、componentDidMount等。用戶自定義的方法能夠起符合JS命名規範的方法就能夠（最好使用駝峯命名），如：handleClick、handleChange、handleMouseover等。java

事件綁定語法：onClick = {this.handleClick}react

綁定事件處理函數

鼠標類

onClickgit

onContextMenugithub

onDoubleClick瀏覽器

onMouseDown異步

onMouseEnter函數

onMouseLeave性能

onMouseMove

onMouseOut

onMouseOver

onMouseUp

拖拽事件：

onDrop

onDrag

onDragEnd

onDragEnter

onDragExit

onDragLeave

onDragOver

onDragStart

觸摸

onTouchCancel

onTouchEnd

onTouchMove

onTouchStart

觸摸只會在移動設備上產生

鍵盤

onKeyPress是onKeyDown和onKeyUp的組合

onKeyDown

onKeyPress

onKeyUp

剪切類

onCopy

onCut

onPaste

對應的是咱們經常使用的複製、剪切和粘貼

表單類

(會專門總結表單類事件，在此僅僅簡單列出)

onChange

onInput

onSubmit

onChange能夠用在輸入框、單選框、下拉列表裏，每當內容發生變化時咱們都能得到通知。onInput使用在文字輸入。onSubmit是用在整個表單的輸入提交，經常使用在禁止表單的默認操做。

焦點事件

onFocus

onBlur

UI元素類

onScroll

滾動事件觸發的時候會觸發onScroll事件

滾動

onWheel

鼠標滾輪觸發的事件，監聽滾動幅度，滾動方位

組成事件

onCompositionEnd

onCompositionStart

onCompositionUpdate

圖片類

onLoad

onError

多媒體類

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

實例演示

var HelloDada = React.creatClass({
    getInitialState:function(){
        return{
            name:''
        };
    },
    handleChange:function(e){
        this.setState({
            name:e.target.value
        });
    },
    render:function(){
        return <div>
        <input onChange={this.handleChange} />
        </div>
    }
});
ReactDom.render(<HelloDada/>,document.body);

事件池

虛擬事件對象已經被合併。這意味着虛擬事件對象將被從新使用，而該事件回調被調用以後全部的屬性將無效。這是出於性能的考慮。所以，您不能以異步的方式訪問事件。

function onClick(event) {
  console.log(event); // =>無效的對象
  console.log(event.type); // => "click"
  var eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  this.setState({clickEvent: event}); // 不起做用.this.state.clickEvent 將只包含空值.
  this.setState({eventType: event.type}); // 您依然能夠導出事件屬性
}

若是您想以一個異步的方式來訪問事件屬性，您應該對事件調用event.persist()。這將從事件池中取出合成的事件，並容許該事件的引用，使用戶的代碼被保留。

事件對象

事件處理器將會傳入SyntheticEvent的實例，一個對瀏覽器本地事件的跨瀏覽器封裝。它有和瀏覽器本地事件相同的屬性和方法，包括stopPropagation()和preventDefault()，可是沒有瀏覽器兼容問題。
若是由於一些因素，須要底層的瀏覽器事件對象，只要使用nativeEvent屬性就能夠獲取到它了。

對於 v0.14，在事件處理函數中返回 false 將不會阻止事件冒泡。取而代之的是在合適的應用場景下，手動調用e.stopPropagation()或者e.preventDefault()。

handleChange:function(e){
        console.log(e.target.value);
    }

其中e是事件對象target是事件對象的屬性

(如下內容括號內爲類型)

通用屬性

bubbles (boolean) 表示事件是否冒泡
cancelable(boolean) 表示事件是否能夠取消
currentTarget(DOMEventTarget) 與Target相似，因爲事件能夠冒泡，因此二者表示的內容是不一樣的
defaultPrevented(boolean) 表示事件是否禁止了默認行爲
eventPhase(number) 表示事件所處的階段
isTrusted(boolean) 表示事件是否可信。所謂的可信事件表示的是用戶操做的事件，不可信事件就是經過JS代碼來觸發的事件。
nativeEvent(DOMEvent)
preventDefault() (void) 對應的defaultPrevented，表示的是禁止默認行爲
stopPropagaTion() (void) 對應的是bubbles，表示的是sh
target(DOMEventTarget)
timeStamp(number) 時間戳，也就是事件觸發的事件
type(string) 事件的類型

不一樣事件對象的特有屬性

剪切事件

clipboardData(DOMDataTransfer)表示拿到的數據

鍵盤事件

altKey(boolean) 表示是否按下alt鍵
charCode(Number) 表示的是按鍵的字符編碼，能夠經過編碼來判斷按下的是什麼鍵
ctrlKey(boolean) 表示是否按下ctrl鍵
getModifierState(key) (function) 表示是否按下輔助按鍵（輔助按鍵就是雷士ctrl、shift等輔助按鍵）能夠傳入按鍵編碼來判斷是否按下
key(string) 字符串，按下的鍵
keyCode(Number) 表示那些不是字符編碼的按鍵
locale(String) 表示本地化得一些字符串
location(number) 表示位置
metaKey(boolean) 表示的是win系統下的win鍵，mac系統下對應的command鍵
repeat(boolean) 表示按鍵是否重複
shiftKey(boolean) 表示是否按下shift
which(Number) 表示通過通用化得charCode和keyCode

焦點事件

relatedTarget(DOMEventTarget) 相關焦點對象

鼠標事件

altKey(boolean)
button(Number)
buttons(Number)
clientX(Number) 原點爲瀏覽器左上角
clinetY(Number) 原點爲瀏覽器左上角
ctrlKey(boolean)
getModifierState(key) (function)
metaKey(boolean)
pageX(Number) 原點爲HTML頁面的左上角
pageY(Number) 原點爲HTML頁面的左上角
relatedTarget(DOMEventTarget)
screenX(Number) 原點爲顯示器的左上角
screenY(Number) 原點爲顯示器的左上角
shiftKey(boolean)

觸摸事件

爲了使觸摸事件生效，在渲染全部組件以前調用 React.initializeTouchEvents(true)。

altKey(boolean)
ctrlKey(boolean)
getModifierState(key)
metaKey(boolean)
shiftKey(boolean)
changedTouches(DOMTouchList) 判斷手勢操做
targetTouches(DOMTouchList) 判斷手勢操做
touches(DOMTouchList) 判斷手勢操做

UI元素事件

detail(Number) 滾動的距離
view(DOMAbstractView) 界面，視窗

鼠標滾動

deltaMode(Number) 能夠理解爲移動的單位
deltaX(Number) X軸移動的相對距離固定值
deltaY(Number) Y軸移動的相對距離固定值
deltaZ(Number) Z軸移動的相對距離固定值

實例

滾動事件對象

var HelloDada = React.creatClass({
    getInitialState:function(){
        return {
            backgroundColor:'#FFFFFF'
        }
    },
    handleWheel:function(e){
        var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+e.deltaY*997).tiString(16);
        this.setState({
            backgroundColor:newColor
        })
    },
    render:function(){
        return <div onWheel={this.handleWheel} style={this.state}>
        <p>Dada Shuaige</p>
        </div>
    }
});
ReactDOM.render(<HelloDada />,document.body)

2.鍵盤事件對象

var Dada =React.creatClass{
    getInitialState:function(){
        return{
            password:''
        }
    },
    handleKeyPress:function(e){
        this.setState({
            paddword:this.state.password+e.which
        });
    },
    handleChange:function(e){
        e.target.value='';
    },
    render:function(){
        return <div>
        <input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
        <p style={{
            'display':this.state.password.indexOf('495051') >=0?'block':'none'
        }}>Dada handsomeboy</p>
        </div>
    }
};
ReactDOM.render(<Dada />,document.body)

事件與狀態關聯

狀態不單單實現了組件內部結果的清晰對應，還實現了組件與用戶之間的交互，使用戶與組件的行爲牢牢結合起來

handleChange:function(e){
    this.setState({Dada:e.target.value});
}

this.setState設置狀態

實例

var Dada =React.creatClass({
    getInitialState:function(){
        return{
            x:0,
            y:0
        }
    },
    handleMouseMove:function(e){
        this.setState({
            x:e.clientX,
            y:e.clientY
        });
    },
    render:function(){
        return <div onMouseMove={this.handleMouseMove} style={{
            width:'200px',
            height:'200px',
            backgroundColor:'#999'
        }}>
        {this.state.x+'.'+this.state.y}
        </div>
    }
});
ReactDOM.render(<Dada />,document.body)