React Event的只知其一;不知其二

事件属性

在DOM世界里每一个事件有本身的类型。例如鼠标事件MouseEvent，经过这个事件能够得到鼠标的信息包括状态和鼠标位置， 每一个键盘相关的事件为KeyboardEvent，该事件对象帮助咱们找到操做的键位key

Synthetic 事件

在react中，像onClick这样的事件都不是直接的操做DOM事件，而是react统一用一个特点的事件类型SyntheticEvent.用户并不能直接得到native的事件参数，得到的是由Synthetic事件对原生浏览器事件封装过的参数。
每个Synthetic事件包含的属性：

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

Synthetic提供了和原生DOM相同的事件函数。可是不是全部的DOM事件都存在react中，使用时能够查阅Synthetic 文档

监听真实DOM

若是想用Synthetic支持以外的事件须要在React的生命周期中挂载和卸载事件
采用的是原生的 window.addEventListener
好像第三方事件如jquery的一些事件监听也是在componentDidMount中添加

class Something extends React.Component{
    ...
    handleMyEvent(e){
     // do something
    }
    componentDidMount(){
        window.addEventListener("someEvent", this.handleMyEvent);
    }
    componentWillUnMount(){
        window.removeEventListener("someEvent", this.handleMyEvent);
    }
    render() {
        ... 
    }
    
}

小提示 关于写法

在react组件中须要手动的bind当前的this对象，不然在事件调用上不能找到当前的this

// method 1
class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = ...
        // 手动bind this
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        ...
    }
    render(){
        return (
          <div>
              <button onClick={this.handleClick}>Click my</button>
          </div>
        )
    }
}
// method 2
// 采用箭头函数，ES6中的箭头函数能自动绑定this
// handleClick = (event) => { ... }

为何react要统一事件

react提出统一事件处理的目的主要是：

1. 浏览器兼容性
2. 改善性能
   在复杂的UI系统中，越多的事件处理意味着应用须要消耗的内存越多。手动解决这个问题并非很麻烦，可是在冗长的过程当中，你须要尝试去给在来源于同一个父节点的事件进行分组。很难权衡。而React就帮咱们解决了这个问题。
   React不是直接的将事件挂在dom上，它在document的根部用一个事件处理去监听和调用相应的事件。

参考：

https://www.kirupa.com/react/...