上一篇博客讲了如何在React使用HTML属性，这次就是函数，但是此篇博客讲述的事件不完备，其他的希望大家自行学习

概念：合成事件（SyntheticEvent）是React事件系统的核心

1.概要

事件处理程序通过合成事件的实例进行传递，合成事件是浏览器原生事件跨浏览器的封装，SyntheticEvent和浏览器的原生事件一样有stopPropagation，preventDefault()接口，同时这些接口也是跨浏览器的。

如果你因为某些原因想使用浏览器原生的时间，可以使用nativeEvent属性获取，每一个合成事件对象都有以下属性：

类型    属性名   
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

注意：

在React v0.14总，事件处理程序返回false不再停止事件传播，取而代之，应该需要手动触发e.stopPropagation()或者e.preventDefault()

2.事件池[Event]

SyntheticEvent 是被池化(池化的概念大家可以百度)的，这意味着SyntheticEvent对象其实是被抽象出来的，它将会被重用并且所有的属性都会在事件回调被调用后被取消掉或者说被释放掉，同时这个对象只会存在一个实例，因此，你不能异步的访问事件，也就是说自始至终你都只有一个对象来使用，何来异步说法。

function onClick(event) {
  console.log(event); // => 事件对象[之后会被取消掉或者说无效化]
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  },0);

  //clickEvent将会被赋值为null[因为最后被析构掉了]
  this.setState({clickEvent: event});

  //这里是有用的，因为event.type是基础类型
  this.setState({eventType: event.type});
}

这也是为什么我们console.log()出来的结果中的时间一般都是null，原因就在这里，所以，如果你为了更好的调试，让事件可以异步处理。

注意

如果你想异步访问事件属性，应该在是处理事件时调用event.persist()，这会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。

3.支持的事件

React将事件进行了统一化，这使得事件可以跨浏览器使用

下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序，应该在事件名字中加入Capture，例如使用onClickCapture处理点击事件的捕获阶段，而不是使用onClick。

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

这些事件接下来要一一讲到了啊，又是一个伟大的工程

剪贴板事件(Clipboard Events)

事件名称

onCopy onCut onPaste

属性

DOMDataTransfer clipboardData

Composition事件

好像是用来处理文字的，暂时不明白

事件名称

onCompositionEnd onCompositionStart onCompositionUpdate

属性

string data

键盘事件(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

焦点事件(Focus Events)

事件名称

onFocus onBlur

这里需要注意的是，focus在React中所有的DOM上都有效而不仅仅是表单元素

属性名

DOMEventTarget relatedTarget

表单事件(Form Events)

事件名称

onChange onInput onSubmit

更多消息可以查看个人博客的表单组件部分

鼠标事件(Mouse Events)

事件名称

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouSEOut onMouSEOver onMouseUp

其中onMouseEnter和onMouseLeave，一个是进入元素触发，一个是离开元素进行触发，不会触发冒泡捕捉，因为他们离开了旧元素必然进入一个新的元素，如此相当于一个冒泡操作了。

属性

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

选择事件(Selection Events)

事件名称

onSelect

触控事件(Touch Events)

事件名称

onTouchCancel onTouchEnd onTouchMove onTouchStart

属性

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean MetaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

用户界面事件(UI Events)

事件名称

onScroll

属性

number detail
DOMAbstractView view

滚轮事件(Wheel Events)

事件名称

onWheel

属性

number deltaMode
number deltaX
number deltaY
number deltaZ

媒体事件(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

图片事件(Image Events)

事件名称

onLoad onError

动画事件(Animation Events)

事件名称

onAnimationStart onAnimationEnd onAnimationIteration

属性

string animationName
string pseudoElement
float elapsedTime

过渡事件(Transition Events)

事件名称

onTransitionEnd

属性

string propertyName
string pseudoElement
float elapsedTime

啊React内容的讲解估计到此为止了，接下来将是React的一些工具使用了，可能要等一段时间了