事件系统VirtualDOM在内存中以对象的形式存在。如果你想给这些对象添加事件，React实现了一个基于VirtualDOM的合成事件层。他完全符合w3c标准，与ie不存在兼容问题。并且它和浏览器的原生事件有相同的接口，支持冒泡，可以通过stopPropagation()和preventDefault()中断。好吧，不要想太多，记住它和浏览器事件是一样的。调用表单中合成事件的绑定方法很简单//jsx:button//browse设备原生:buttonreact只是借鉴了DOM0级事件的写法。在react组件中，每个方法的上下文都会指向该组件的实例，即自动将this绑定到当前组件。并且React也会缓存这个引用来优化CPU和内存。当使用ES6类或纯函数时，这种绑定不再存在。我们需要手动实现这个绑定的bind方法。这个方法可以帮助我们在事件处理器中绑定this，传递给事件处理器参数importReact,{Component}form'react';classAppextendsComponent{handleClick(e,arg){console.log(e,arg)}render(){return(button)}}构造函数中的声明完成了组件构造函数中this的绑定。这种绑定方式的好处是只需要一次绑定，不需要在每次调用事件监听器的时候都进行绑定操作。importReact,{Component}form'react';classAppextendsComponent{constructor(){super();this.handleClick=this.handleClick.bind(this,arg);}handleClick(e,arg){console.log(e,arg)}render(){return(this.handleClick(this,'test')}>button)}}箭头函数箭头函数不仅是函数糖的语法，它还会自动绑定定义this函数范围的this，所以我们不需要在上面使用bind方法。importReact,{Component}form'react';classAppextendsComponent{constructor(){super();this.handleClick=(e,arg)=>{console.log(e,arg)}}render(){return(按钮)}}React使用原生事件React提供了一个很好的合成事件系统，但有时需要使用原生事件。React生命周期中提供的componentDidMount将在组件安装完成并且真正的DOM存在于浏览器中后被调用。这时候我们就可以完成原生事件的绑定了。例如：importReact,{Component}form'react';类App扩展组件{constructor(){super();}componentDidMount(){this.refs.button.addEventListener('click',e=>{handleClick(e);})}handleClick(e){console.log(e)}componentWillUnmount(){this.refs.button.removeEventListener('click')}render(){return(Button)}}需要注意的是，在React中使用原生DOM事件时，必须手动移除组件被卸载，否则容易发生内存泄漏。2使用合成事件系统时不需要，因为React内部会处理它。事件类型键盘事件onKeyDownonKeyPressonKeyUp焦点事件onFocusonBlur表单事件onChangeonInputonSubmit鼠标事件onClickonContextMenuonDoubleClickonMouseDownonMouseUponMouseOveronMouseOutonMouseMoveonMouseEnteronMouseLeaveonDrag选择事件onSelect触摸事件onTouchCancelonTouchEndonTouchMoveonTouchStartUI事件onScroll动画事件onAnimationStartonAnimationEndonAnimationIteration图像事件onLoadonError媒体事件onPauseonPlayonCanPlayonLoadStartonProgress剪贴板事件onCopyonCutonPaste上一篇：react开发教程（6)ReactandDOM
