SyntheticEvnet(合成事件)

了解 React 里面的各个 event

每个事件都有以下的事件

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

事件池

SyntheticEvent是合并来的。所以 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件。

function onClick(event) {
	console.log(event);	// => nullified object
	console.log(event.type); // => "click"
	const eventType = event.type; // => "click"
	setTimeout(function() {
		console.log(event.type);	// => null
		console.log(eventType);	// => "click"
	}, 0);
	//	不起作用，setState 是异步的，this.state.clickEvent 的值只会包含 null
	this.setState({ clickEvent: event});
	// 但是，你仍然可以导出事件属性
	this.setState({eventType: event.type});
}

注意：

如果你想异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。

支持的事件

React 通过将事件 normalize 以让他们在不同浏览器中拥有一致的属性。

以下的事件处理函数在冒泡阶段被触发。如需注册捕获阶段的事件处理函数，则应为事件名添加 Capture。例如，处理捕获阶段的点击事件请使用 onClickCapture，而不是 onClick。

• Clipboard Events

  事件名：

  onCopy onCut onPaste
  

  属性：

  DOMDataTransfer clipboardData
  

• Composition Events

  事件名

  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
  

  这些焦点事件在 React DOM 上的所有元素都有效，不只是表单元素

  属性：

  DOMEventTarget relatedTarget
  

• Form Events

  事件名：

  onChange onInput onInvalid onReset onSubmit
  

• Generic Events

  事件名称：

  onError onLoad
  

• 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
  

• Pointer Events

  事件名：

  onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
  onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
  

  属性：

  number pointerId
  number width
  number height
  number pressure
  number tangentialPressure
  number tiltX
  number tiltY
  number twist
  string pointerType
  boolean isPrimary
  

• 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
  

• Other Events

  onToggle