get vendor prefixed event name

获取带供应商前缀的事件名称，主要针对不同的渲染内核提供的供应商前缀。有以谷歌 "Chromium" 为基的 chrome、edge chrome、opera chrome 和独树一帜 Safari 采用 webkit 标识及完全另类的火狐家 moz。

备注

• canUseDOM() 由 ExecutionEnvironment#canUseDOM 实现

/**
 * Generate a mapping of standard vendor prefixes using the defined
 * style property and event name.
 *
 * 使用定义的样式属性和事件名称生成标准厂商前缀的映射。
 *
 * @param {string} styleProp
 * @param {string} eventName
 * @returns {object}
 */
function makePrefixMap(styleProp, eventName) {
  const prefixes = {};

  prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
  prefixes['Webkit' + styleProp] = 'webkit' + eventName;
  prefixes['Moz' + styleProp] = 'moz' + eventName;

  return prefixes;
}

/**
 * A list of event names to a configurable list of vendor prefixes.
 * 将事件名称列表映射到可配置的供应商前缀列表。
 */
const vendorPrefixes = {
  animationend: makePrefixMap('Animation', 'AnimationEnd'),
  animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
  animationstart: makePrefixMap('Animation', 'AnimationStart'),
  transitionrun: makePrefixMap('Transition', 'TransitionRun'),
  transitionstart: makePrefixMap('Transition', 'TransitionStart'),
  transitioncancel: makePrefixMap('Transition', 'TransitionCancel'),
  transitionend: makePrefixMap('Transition', 'TransitionEnd'),
};

/**
 * Event names that have already been detected and prefixed (if applicable).
 * 已经检测到并加上前缀（如适用）的事件名称。
 */
const prefixedEventNames = {};

/**
 * Element to check for prefixes on.
 * 要检查前缀的元素。
 */
let style = {};

/**
 * Bootstrap if a DOM exists.
 * 如果存在 DOM，则进行初始化。
 */
if (canUseDOM) {
  style = document.createElement('div').style;

  // On some platforms, in particular some releases of Android 4.x,
  // the un-prefixed "animation" and "transition" properties are defined on the
  // style object but the events that fire will still be prefixed, so we need
  // to check if the un-prefixed events are usable, and if not remove them from the map.
  // 在某些平台上，特别是某些版本的 Android 4.x，未加前缀的 “animation” 和 “transition” 属性
  // 在 style 对象上是定义了的，但触发的事件仍然会带前缀，所以我们需要检查未加前缀的事件是否可用，
  // 如果不可用，则从映射中移除它们。
  if (!('AnimationEvent' in window)) {
    delete vendorPrefixes.animationend.animation;
    delete vendorPrefixes.animationiteration.animation;
    delete vendorPrefixes.animationstart.animation;
  }

  // Same as above
  // 同上
  if (!('TransitionEvent' in window)) {
    delete vendorPrefixes.transitionend.transition;
  }
}

/**
 * Attempts to determine the correct vendor prefixed event name.
 * 尝试确定正确的厂商前缀事件名称。
 *
 * @param {string} eventName
 * @returns {string}
 */
function getVendorPrefixedEventName(eventName) {
  if (prefixedEventNames[eventName]) {
    return prefixedEventNames[eventName];
  } else if (!vendorPrefixes[eventName]) {
    return eventName;
  }

  const prefixMap = vendorPrefixes[eventName];

  for (const styleProp in prefixMap) {
    if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
      return (prefixedEventNames[eventName] = prefixMap[styleProp]);
    }
  }

  return eventName;
}

export default getVendorPrefixedEventName;