SyntheticEvent

DOM事件

一、綁定事件

在 React 中綁定事件的方式很簡單，只需要在元素中添加事件名稱的屬性已經對應的處理函數，事件名稱和其他屬性名稱一樣，服從駝峰式命名。如：

class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.onClick=this.onClick.bind(this);
    }
    render() {
        return  <div>
                    <button onClick={this.onClick}>Click Me</button>
                </div>
    }
    onClick() {
        console.log('click me');
    }
}

 

二、合成事件

React事件處理將接受SyntheticEvent實例，它封裝了瀏覽器原生事件對象，並對瀏覽器做了兼容。他和瀏覽器原生事件對象有相同的接口，包括stopPropagation()和preventDefault()。如果出於某些原因想使用瀏覽器原生事件，可以使用 nativeEvent 屬性獲取。每個SyntheticEvent對象都有下面的屬性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

2.1 事件池化

合成事件是池化的，也就是說SyntheticEvent對象會被重用，而且當事件回調函數被執行后所有的屬性將被銷毀。這也是出於性能的考慮。因此你不能異步訪問event。如：

class HelloWorld extends React.Component{
    constructor(props){
        super(props);
        this.handleClick=this.handleClick.bind(this);
    }
    handleClick(e){
        // e.persist();
        window.setTimeout(function(){
            console.log(e);
            console.log(e.type);
        },1000);
    }
    render(){
        return <button onClick={this.handleClick}>click me</button>
    }
}

ReactDOM.render(<HelloWorld/>,document.body);

當一個事件響應函數執行過后，事件的屬性被設置為 null， 如果想用保持事件的值的話，可以調用

event.persist()

這樣，屬性會被保留，並且事件也會被從池中取出。

 

2.2 支持的事件

React規范化事件以使得在不同瀏覽器之間保持相同的屬性。下面的事件處理程序都是在冒泡階段觸發的。在捕獲階段注冊事件處理程序需要在事件名稱后添加Capture。比如點擊事件，冒泡階段是onClick，在捕獲階段為onClickCapture.

Clipboard Events
Composition Events
Keyboard Events
Focus Events
Form Events
Mouse Events
Selection Events
Touch Events
UI Events
Wheel Events
Media Events
Image Events
Animation Events
Transition Events

 

1) 剪貼板事件（Clipboard Events）

事件名稱：onCopy onCut onPaste
屬   性：DOMDataTransfer clipboardData

 

2) 編輯事件（Composition Events）

事件名稱：onCompositionEnd onCompositionStart onCompositionUpdate
屬   性：string data

 

3) 鍵盤事件（Keyboard Events）

事件名稱：onKeyDown onKeyPress onKeyUp
屬   性： {
        boolean altKey
        number charCode
        boolean ctrlKey
        boolean getModifierState(key)
        string key
        number keyCode
        string locale
        number location
        boolean metaKey
        boolean repeat
        boolean shiftKey
        number which
    }

 

4) 焦點事件（Focus Events）

名稱：onFocus onBlur
屬性：DOMEventTarget relatedTarget

焦點事件不僅可以用於表單元素，也可以用於所有的其他元素。

 

5) 表單事件（Form Events）

名稱：onChange onInput onSubmit

 

6) 鼠標事件（Mouse Events）

名稱：{
        onClick 
        onContextMenu 
        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
        boolean getModifierState(key)
        boolean metaKey
        number pageX
        number pageY
        DOMEventTarget relatedTarget
        number screenX
        number screenY
        boolean shiftKey
} 

The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.

 

7) 選擇事件（Selection Events）

名稱：onSelect

 

8) 觸摸事件（Touch Events）

名稱：onTouchCancel onTouchEnd onTouchMove onTouchStart
屬性：{
        boolean altKey
        DOMTouchList changedTouches
        boolean ctrlKey
        boolean getModifierState(key)
        boolean metaKey
        boolean shiftKey
        DOMTouchList targetTouches
        DOMTouchList touches
    }

 

9) UI事件（UI Events）

名稱：onScroll
屬性：{
        number detail
        DOMAbstractView view
    }

 

10) 滾輪事件（Wheel Events）

名稱：onWheel
屬性：{
        number deltaMode
        number deltaX
        number deltaY
        number deltaZ
    }

 

11) 媒體事件（Media Events）

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

 

12) 圖像事件（Image Events）

名稱：onLoad onError

 

13) 動畫事件（Animation Events）

名稱：onAnimationStart onAnimationEnd onAnimationIteration
屬性：{
        string animationName
        string pseudoElement
        float elapsedTime
    }

 

14) 漸變事件（Transition Events） 

名稱：onTransitionEnd
屬性： {
        string propertyName
        string pseudoElement
        float elapsedTime
    }