DOM event properties

一、作用

二、导出常量

1、 顶级事件到 React 名称

备注

源码中 28 - 29 行

export const topLevelEventsToReactNames: Map<DOMEventName, string | null> =
  new Map();

三、注册简单事件

export function registerSimpleEvents() {
  for (let i = 0; i < simpleEventPluginEvents.length; i++) {
    const eventName = simpleEventPluginEvents[i] as any as string;
    const domEventName = eventName.toLowerCase() as any as DOMEventName;
    const capitalizedEvent = eventName[0].toUpperCase() + eventName.slice(1);
    registerSimpleEvent(domEventName, 'on' + capitalizedEvent);
  }
  // Special cases where event names don't match.
  // 事件名称不匹配的特殊情况。
  registerSimpleEvent(ANIMATION_END, 'onAnimationEnd');
  registerSimpleEvent(ANIMATION_ITERATION, 'onAnimationIteration');
  registerSimpleEvent(ANIMATION_START, 'onAnimationStart');
  registerSimpleEvent('dblclick', 'onDoubleClick');
  registerSimpleEvent('focusin', 'onFocus');
  registerSimpleEvent('focusout', 'onBlur');

  registerSimpleEvent(TRANSITION_RUN, 'onTransitionRun');
  registerSimpleEvent(TRANSITION_START, 'onTransitionStart');
  registerSimpleEvent(TRANSITION_CANCEL, 'onTransitionCancel');
  registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
}

四、常量

1. 简单事件插件事件

备注

源码中 31 - 112 行

• enableScrollEndPolyfill 由 ReactFeatureFlags#enableScrollEndPolyfill 提供
• enableCreateEventHandleAPI 由 ReactFeatureFlags#enableCreateEventHandleAPI 提供

// NOTE: Capitalization is important in this list!
// 注意：此列表中的大小写很重要！
//
// E.g. it needs "pointerDown", not "pointerdown".
// This is because we derive both React name ("onPointerDown")
// and DOM name ("pointerdown") from the same list.
// 例如，它需要 "pointerDown"，而不是 "pointerdown"。这是因为我们从同一个列表中派生出
// React 名称（"onPointerDown"）和 DOM 名称（"pointerdown"）。
//
// Exceptions that don't match this convention are listed separately.
// 不符合此约定的例外情况将另行列出。
const simpleEventPluginEvents = [
  'abort',
  'auxClick',
  'beforeToggle',
  'cancel',
  'canPlay',
  'canPlayThrough',
  'click',
  'close',
  'contextMenu',
  'copy',
  'cut',
  'drag',
  'dragEnd',
  'dragEnter',
  'dragExit',
  'dragLeave',
  'dragOver',
  'dragStart',
  'drop',
  'durationChange',
  'emptied',
  'encrypted',
  'ended',
  'error',
  'fullscreenChange',
  'fullscreenError',
  'gotPointerCapture',
  'input',
  'invalid',
  'keyDown',
  'keyPress',
  'keyUp',
  'load',
  'loadedData',
  'loadedMetadata',
  'loadStart',
  'lostPointerCapture',
  'mouseDown',
  'mouseMove',
  'mouseOut',
  'mouseOver',
  'mouseUp',
  'paste',
  'pause',
  'play',
  'playing',
  'pointerCancel',
  'pointerDown',
  'pointerMove',
  'pointerOut',
  'pointerOver',
  'pointerUp',
  'progress',
  'rateChange',
  'reset',
  'resize',
  'seeked',
  'seeking',
  'stalled',
  'submit',
  'suspend',
  'timeUpdate',
  'touchCancel',
  'touchEnd',
  'touchStart',
  'volumeChange',
  'scroll',
  'toggle',
  'touchMove',
  'waiting',
  'wheel',
];

if (!enableScrollEndPolyfill) {
  simpleEventPluginEvents.push('scrollEnd');
}

if (enableCreateEventHandleAPI) {
  // Special case: these two events don't have on* React handler
  // and are only accessible via the createEventHandle API.
  // 特殊情况：这两个事件没有 `on*` React 处理程序
  // 只能通过 `createEventHandle` API 访问。
  topLevelEventsToReactNames.set('beforeblur', null);
  topLevelEventsToReactNames.set('afterblur', null);
}

五、工具

1. 注册简单事件

备注

• registerTwoPhaseEvent() 由 EventRegistry#registerTwoPhaseEvent 实现

function registerSimpleEvent(domEventName: DOMEventName, reactName: string) {
  topLevelEventsToReactNames.set(domEventName, reactName);
  registerTwoPhaseEvent(reactName, [domEventName]);
}