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
    }

 

转载于:https://www.cnblogs.com/YangqinCao/p/6155560.html