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

多喝熱水早點睡發表於2016-03-19
ReactJS筆記事件

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

@(React學習)

事件系統

React 標準化了事件物件，因此在不同的瀏覽器中都會有相同的屬性。

元件createClass後建立的是許多方法組成的物件。元件中使用的方法分為React自有的方法與使用者定義的方法。其中React自有方法是元件生命週期中的方法，如：render、componentWillUpdate、componentDidMount等。使用者自定義的方法可以起符合JS命名規範的方法就可以（最好使用駝峰命名），如：handleClick、handleChange、handleMouseover等。

事件繫結語法：onClick = {this.handleClick}

繫結事件處理函式

滑鼠類

  • onClick

  • onContextMenu

  • 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軸移動的相對距離固定值

例項

  1. 滾動事件物件

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)

小結

本節主要介紹了React的事件系統，很詳細的列出了每一個事件物件與事件物件的屬性，可以作為一個查詢的參考。

特別感謝

相關文章