React 合成事件

Question

合成事件

以下的事件处理函数在冒泡阶段被触发。

如需注册捕获阶段的事件处理函数，则应为事件名添加 Capture 。

例如，处理捕获阶段的点击事件请使用 onClickCapture ，而不是 onClick 。

1.剪贴板事件 Clipboard Events

• 事件名： onCopy 、 onCut 、 onPaste
• 属性：

  clipboardData：DOMDataTransfer
  

2.复合事件 Composition Events

• 事件名： onCompositionEnd 、 onCompositionStart 、 onCompositionUpdate
• 属性：

  data：string
  

3.键盘事件 Keyboard Events

• 事件名： onKeyDown 、 onKeyPress 、 onKeyUp
• 属性：

  altKey: boolean 
  charCode: number 
  ctrlKey: boolean 
  getModifierState(key): boolean 
  key: string 
  keyCode: number 
  locale: string 
  location: number 
  metaKey: boolean 
  repeat: boolean 
  shiftKey: boolean 
  which: number
  

4.焦点事件 Focus Events

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

• 事件名： onFocus 、 onBlur
• 属性：

  relatedTarget：DOMEventTarget
  

监听焦点的进入与离开 ：

使用 currentTarget 和 relatedTarget 来区分聚焦和失去焦点是否来自父元素外部。

下面展示了如何监听一个子元素的聚焦，元素本身的聚焦，以及整个子树进入焦点或离开焦点。

function Example() {
  return (
    <div
      tabIndex={1}
      onFocus={(e) => {
        if (e.currentTarget === e.target) {
          console.log('focused self');
        } else {
          console.log('focused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus entered self');
        }
      }}
      onBlur={(e) => {
        if (e.currentTarget === e.target) {
          console.log('unfocused self');
        } else {
          console.log('unfocused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus left self');
        }
      }}
    >
      <input id="1" />
      <input id="2" />
    </div>
  );
}

5.表单事件 Form Events

• 事件名： onChange 、 onInput 、 onInvalid 、 onReset 、 onSubmit

6.通用事件 Generic Events

• 事件名： onError 、 onLoad

7.鼠标事件 Mouse Events

onMouseEnter 和 onMouseLeave 事件从离开的元素向进入的元素传播，不是正常的冒泡，也没有捕获阶段。

• 事件名：

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

• 属性：

  altKey：boolean 
  button：number
  buttons：number
  clientX：number
  clientY：number
  ctrlKey：boolean
  getModifierState(key)：boolean
  metaKey：boolean
  pageX：number
  pageY：number
  relatedTarget：DOMEventTarget
  screenX：number
  screenY：number
  shiftKey：boolean
  

8.指针事件 Pointer Events

onPointerEnter 和 onPointerLeave 事件从离开的元素向进入的元素传播，不是正常的冒泡，也没有捕获阶段。

• 事件名：

  onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
  onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
  

• 属性：

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

并非每个浏览器都支持指针事件（在写这篇文章时，已支持的浏览器有：Chrome，Firefox，Edge 和 Internet Explorer）。React 故意不通过 polyfill 的方式适配其他浏览器，主要是符合标准的 polyfill 会显著增加 react-dom 的 bundle 大小。

如果你的应用要求指针事件，我们推荐添加第三方的指针事件 polyfill。

9.选择事件 Selection Events

• 事件名： onSelect

10.触摸事件 Touch Events

• 事件名： onTouchCancel 、 onTouchEnd 、 onTouchMove 、 onTouchStart
• 属性：

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

11.UI 事件 UI Events

• 事件名： onScroll
• 属性：

  detail：number 
  view：DOMAbstractView
  

12.滚轮事件 Wheel Events

• 事件名： onWheel
• 属性：

  deltaMode：number 
  deltaX：number 
  deltaY：number 
  deltaZ：number
  

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

14.图像事件 Image Events

• 事件名： onLoad 、 onError

15.动画事件 Animation Events

• 事件名： onAnimationStart 、 onAnimationEnd 、 onAnimationIteration
• 属性：

  animationName：string 
  pseudoElement：string 
  elapsedTime：float
  

16.过渡事件 Transition Events

• 事件名： onTransitionEnd
• 属性：

  propertyName：string 
  pseudoElement：string 
  elapsedTime：float
  

17.其他事件 Other Events

• 事件名： onToggle