碼上歡樂
相關內容    簡體    繁體

React 事件總結

本文轉載自   查看原文   2019-01-26 17:07   852    react

目錄

一 綁定事件處理函數

1.1 鼠標類

  1. onContextMenu
  2. onClick
  3. onDoubleClick
  4. onMouseDown
  5. onMouseUp
  6. onMouseEnter
  7. onMouseLeave
  8. onMouseMove
  9. onMouseOut
  10. onMouseOver

1.2 拖拽事件：

  1. onDrop
  2. onDrag
  3. onDragStart
  4. onDragEnd
  5. onDragEnter
  6. onDragLeave
  7. onDragOver
  8. onDragExit

1.3 觸摸

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

  1. onTouchStart
  2. onTouchEnd
  3. onTouchMove
  4. onTouchCancel

1.4 鍵盤

onKeyPress是onKeyDown和onKeyUp的組合

  1. onKeyPress
  2. onKeyDown
  3. onKeyUp

1.5 剪切類

對應的是我們常常使用的復制、剪切和粘貼

  1. onCopy
  2. onCut
  3. onPaste

1.6 表單類

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

  1. onChange
  2. onInput
  3. onSubmit

onChange可以用在輸入框、單選框、下拉列表里，每當內容發生變化時我們都能獲得通知。
onInput使用在文字輸入。
onSubmit是用在整個表單的輸入提交，常用在禁止表單的默認操作。

1.7 焦點事件

  1. onFocus
  2. onBlur

1.8 UI元素類

  1. onScroll

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

1.9 滾動

  1. onWheel

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

1.10 組成事件

  1. onCompositionEnd
  2. onCompositionStart
  3. onCompositionUpdate

1.11 圖片類

  1. onLoad
  2. onError

1.12 多媒體類

  1. onAbort
  2. onCanPlay
  3. onCanPlayThrough
  4. onDurationChange
  5. onEmptied
  6. onEncrypted
  7. onEnded
  8. onError
  9. onLoadedData
  10. onLoadedMetadata
  11. onLoadStart
  12. onPause
  13. onPlay
  14. onPlaying
  15. onProgress
  16. onRateChange
  17. onSeeked
  18. onSeeking
  19. onStalled
  20. onSuspend
  21. onTimeUpdate
  22. onVolumeChange
  23. onWaiting

二 事件池

虛擬事件對象已經被合並。這意味着虛擬事件對象將被重新使用，而該事件回調被調用之后所有的屬性將無效。這是出於性能的考慮。因此，您不能以異步的方式訪問事件。

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);
  }

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

3.1 通用屬性

(以下內容括號內為類型)

  1. bubbles (boolean) 表示事件是否冒泡
  2. cancelable(boolean) 表示事件是否可以取消
  3. currentTarget(DOMEventTarget) 與Target類似，由於事件可以冒泡，所以兩者表示的內容是不同的
  4. defaultPrevented(boolean) 表示事件是否禁止了默認行為
  5. eventPhase(number) 表示事件所處的階段
  6. isTrusted(boolean) 表示事件是否可信。所謂的可信事件表示的是用戶操作的事件，不可信事件就是通過JS代碼來觸發的事件。
  7. nativeEvent(DOMEvent)
  8. preventDefault() (void) 對應的defaultPrevented，表示的是禁止默認行為
  9. stopPropagaTion() (void) 對應的是bubbles，表示的是sh
  10. target(DOMEventTarget)
  11. timeStamp(number) 時間戳，也就是事件觸發的事件
  12. type(string) 事件的類型

3.2 不同事件對象的特有屬性

3.2.1 剪切事件

  1. clipboardData(DOMDataTransfer)表示拿到的數據

3.2.2 鍵盤事件

  1. ctrlKey(boolean) 表示是否按下ctrl鍵
  2. altKey(boolean) 表示是否按下alt鍵
  3. shiftKey(boolean) 表示是否按下shift
  4. metaKey(boolean) 表示的是win系統下的win鍵，mac系統下對應的command鍵
  5. getModifierState(key) (function) 表示是否按下輔助按鍵（輔助按鍵就是雷士ctrl、shift等輔助按鍵）可以傳入按鍵編碼來判斷是否按下
  6. charCode(Number) 表示的是按鍵的字符編碼，可以通過編碼來判斷按下的是什么鍵
  7. key(string) 字符串，按下的鍵
  8. keyCode(Number) 表示那些不是字符編碼的按鍵
  9. which(Number) 表示經過通用化得charCode和keyCode
  10. locale(String) 表示本地化得一些字符串
  11. location(number) 表示位置
  12. repeat(boolean) 表示按鍵是否重復

3.2.3 焦點事件

  1. relatedTarget(DOMEventTarget) 相關焦點對象

3.2.4 鼠標事件

  1. ctrlKey(boolean)
  2. altKey(boolean)
  3. shiftKey(boolean)
  4. metaKey(boolean)
  5. getModifierState(key) (function)
  6. button(Number)
  7. buttons(Number)
  8. clientX(Number) 原點為瀏覽器左上角
  9. clinetY(Number) 原點為瀏覽器左上角
  10. pageX(Number) 原點為HTML頁面的左上角
  11. pageY(Number) 原點為HTML頁面的左上角
  12. screenX(Number) 原點為顯示器的左上角
  13. screenY(Number) 原點為顯示器的左上角
  14. relatedTarget(DOMEventTarget)

3.2.5 觸摸事件

為了使觸摸事件生效，在渲染所有組件之前調用 React.initializeTouchEvents(true)。

  1. ctrlKey(boolean)
  2. altKey(boolean)
  3. shiftKey(boolean)
  4. metaKey(boolean)
  5. getModifierState(key)
  6. changedTouches(DOMTouchList) 判斷手勢操作
  7. targetTouches(DOMTouchList) 判斷手勢操作
  8. touches(DOMTouchList) 判斷手勢操作

3.2.6 UI元素事件

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

3.2.7 鼠標滾動

  1. deltaMode(Number) 可以理解為移動的單位
  2. deltaX(Number) X軸移動的相對距離固定值
  3. deltaY(Number) Y軸移動的相對距離固定值
  4. deltaZ(Number) Z軸移動的相對距離固定值

3.3 實例

3.3.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)

3.3.2 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設置狀態

4.1 實例

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)


免責聲明！

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



猜您在找 React事件綁定總結 react總結之事件(this指向與ref) react———react合成事件 React鼠標事件 React筆記-事件分發 react 阻止事件冒泡 react事件綁定this的原因 react 事件綁定傳參 React 滾動事件 react 使用觸摸事件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM