SyntheticAnimationEvent、SyntheticMouseEvent等合成事件对象

SyntheticAnimationEvent模块，基于SyntheticEvent合成的animation动效事件对象，专设animationName、elapsedTime、pseudoElement属性。

SyntheticTransitionEvent模块，基于SyntheticEvent合成的transition动效事件对象，专设propertyName、elapsedTime、pseudoElement属性。

SyntheticClipboardEvent模块，基于SyntheticEvent合成的剪贴面板事件对象，专设clipboardData属性。

SyntheticCompositionEvent模块，基于SyntheticEvent合成的构图事件对象，专设data属性。

SyntheticInputEvent模块，基于SyntheticEvent合成的输入框事件对象，专设data属性。

SyntheticUIEvent模块，基于SyntheticEvent合成的UI事件对象，专设view、detail属性。

SyntheticTouchEvent模块，基于SyntheticUIEvent合成的触摸事件对象，专设touches、targetTouches、changedTouches、altKey、metaKey、ctrlKey、shiftKey、getModifierState属性。

SyntheticFocusEvent模块，基于SyntheticUIEvent合成的焦点事件对象，专设relatedTarget属性。

SyntheticKeyboardEvent模块，基于SyntheticUIEvent合成的键盘事件对象，专设key、locations、altKey、metaKey、ctrlKey、shiftKey、getModifierState、charCode、keyCode、which属性。

扫描二维码关注公众号，回复： 306238 查看本文章

SyntheticMouseEvent模块，基于SyntheticUIEvent合成的鼠标事件对象，专设screenX、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、button、buttons、relatedTarget、pageX、pageY属性。

SyntheticDragEvent模块，基于SyntheticMouseEvent合成的鼠标事件对象，专设dataTransfer属性。

SyntheticWheelEvent模块，基于SyntheticMouseEvent合成的滚轮事件对象，专设eltaX、deltaY、deltaZ、deltaMode属性。

SyntheticAnimationEvent.js

'use strict';

var SyntheticEvent = require('./SyntheticEvent');

var AnimationEventInterface = {
  animationName: null,
  elapsedTime: null,
  pseudoElement: null
};

// 在SyntheticEvent基础上为SyntheticAnimationEvent实例添加animationName、elapsedTime、pseudoElement属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticAnimationEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticEvent.augmentClass(SyntheticAnimationEvent, AnimationEventInterface);

module.exports = SyntheticAnimationEvent;

SyntheticTransitionEvent.js

'use strict';

var SyntheticEvent = require('./SyntheticEvent');

var TransitionEventInterface = {
  propertyName: null,
  elapsedTime: null,
  pseudoElement: null
};

// 在SyntheticEvent基础上为SyntheticUIEvent实例添加propertyName、elapsedTime、pseudoElement属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticTransitionEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticEvent.augmentClass(SyntheticTransitionEvent, TransitionEventInterface);

module.exports = SyntheticTransitionEvent;

SyntheticClipboardEvent.js

'use strict';

var SyntheticEvent = require('./SyntheticEvent');

var ClipboardEventInterface = {
  clipboardData: function (event) {
    return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
  }
};

// 在SyntheticEvent基础上为SyntheticClipboardEvent实例添加clipboardData属性，作兼容性处理
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticClipboardEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticEvent.augmentClass(SyntheticClipboardEvent, ClipboardEventInterface);

module.exports = SyntheticClipboardEvent;

SyntheticCompositionEvent.js

'use strict';

var SyntheticEvent = require('./SyntheticEvent');

var CompositionEventInterface = {
  data: null
};

// 在SyntheticEvent基础上为SyntheticCompositionEvent实例添加data属性，该数据在适当时机(事件结束后)将予以销毁
function SyntheticCompositionEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticEvent.augmentClass(SyntheticCompositionEvent, CompositionEventInterface);

module.exports = SyntheticCompositionEvent;

SyntheticInputEvent.js

'use strict';

var SyntheticEvent = require('./SyntheticEvent');

var InputEventInterface = {
  data: null
};

// 在SyntheticEvent基础上为SyntheticInputEvent实例添加data属性，该数据在适当时机(事件结束后)将予以销毁
function SyntheticInputEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticEvent.augmentClass(SyntheticInputEvent, InputEventInterface);

module.exports = SyntheticInputEvent;

SyntheticUIEvent.js

'use strict';

var SyntheticEvent = require('./SyntheticEvent');

var getEventTarget = require('./getEventTarget');

var UIEventInterface = {
  view: function (event) {
    if (event.view) {
      return event.view;
    }

    var target = getEventTarget(event);
    if (target.window === target) {
      // target is a window object
      return target;
    }

    var doc = target.ownerDocument;

    // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
    if (doc) {
      return doc.defaultView || doc.parentWindow;
    } else {
      return window;
    }
  },
  detail: function (event) {
    return event.detail || 0;
  }
};

// 在SyntheticEvent基础上为SyntheticUIEvent实例添加view、detail属性，该数据在适当时机(事件结束后)将予以销毁
function SyntheticUIEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticEvent.augmentClass(SyntheticUIEvent, UIEventInterface);

module.exports = SyntheticUIEvent;

SyntheticTouchEvent.js

'use strict';

var SyntheticUIEvent = require('./SyntheticUIEvent');

// 判断Alt、Ctrl等键处于按下状态
var getEventModifierState = require('./getEventModifierState');

var TouchEventInterface = {
  touches: null,
  targetTouches: null,
  changedTouches: null,
  altKey: null,
  metaKey: null,
  ctrlKey: null,
  shiftKey: null,
  getModifierState: getEventModifierState
};

// 在SyntheticUIEvent基础上为SyntheticTouchEvent实例添加touches、targetTouches、changedTouches、altKey、metaKey、ctrlKey、shiftKey、getModifierState属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticTouchEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticUIEvent.augmentClass(SyntheticTouchEvent, TouchEventInterface);

module.exports = SyntheticTouchEvent;

SyntheticFocusEvent.js

'use strict';

var SyntheticUIEvent = require('./SyntheticUIEvent');

var FocusEventInterface = {
  relatedTarget: null
};

// 在SyntheticUIEvent基础上为SyntheticFocusEvent实例添加relatedTarget属性，该数据在适当时机(事件结束后)将予以销毁
function SyntheticFocusEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticUIEvent.augmentClass(SyntheticFocusEvent, FocusEventInterface);

module.exports = SyntheticFocusEvent;

SyntheticKeyboardEvent.js

'use strict';

var SyntheticUIEvent = require('./SyntheticUIEvent');

// 获取键盘按键字符码
var getEventCharCode = require('./getEventCharCode');

// 获取键盘按键名
var getEventKey = require('./getEventKey');

// 判断Alt、Ctrl等键处于按下状态
var getEventModifierState = require('./getEventModifierState');

var KeyboardEventInterface = {
  key: getEventKey,
  location: null,
  ctrlKey: null,
  shiftKey: null,
  altKey: null,
  metaKey: null,
  repeat: null,
  locale: null,
  getModifierState: getEventModifierState,
  // 键盘按键字符码
  charCode: function (event) {
    if (event.type === 'keypress') {
      return getEventCharCode(event);
    }
    return 0;
  },
  // 键盘按键码
  keyCode: function (event) {
    if (event.type === 'keydown' || event.type === 'keyup') {
      return event.keyCode;
    }
    return 0;
  },
  // which根据事件类型取keyCode或charCode
  which: function (event) {
    if (event.type === 'keypress') {
      return getEventCharCode(event);
    }
    if (event.type === 'keydown' || event.type === 'keyup') {
      return event.keyCode;
    }
    return 0;
  }
};

// 在SyntheticUIEvent基础上为SyntheticKeyboardEvent实例添加key、locations、altKey、metaKey、ctrlKey、shiftKey、getModifierState、charCode、keyCode、which属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticKeyboardEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticUIEvent.augmentClass(SyntheticKeyboardEvent, KeyboardEventInterface);

module.exports = SyntheticKeyboardEvent;

SyntheticMouseEvent.js

'use strict';

var SyntheticUIEvent = require('./SyntheticUIEvent');

// 用于计算页面滚动状况
var ViewportMetrics = require('./ViewportMetrics');

// 判断Alt、Ctrl等键处于按下状态
var getEventModifierState = require('./getEventModifierState');

var MouseEventInterface = {
  // offsetX 鼠标距离事件触发元素左边框的距离
  // offsetY 鼠标距离事件触发元素上边框的距离
  screenX: null,// 鼠标距离显示器屏幕左边框的距离
  screenY: null,// 鼠标距离显示器屏幕上边框的距离
  clientX: null,// 鼠标距离浏览器左边框的距离
  clientY: null,// 鼠标距离浏览器上边框的距离
  ctrlKey: null,
  shiftKey: null,
  altKey: null,
  metaKey: null,
  getModifierState: getEventModifierState,
  // 获取鼠标按键码
  button: function (event) {
    // Webkit, Firefox, IE9+
    // which:  1 2 3
    // button: 0 1 2 (standard)
    var button = event.button;
    if ('which' in event) {
      return button;
    }
    // IE<9
    // which:  undefined
    // button: 0 0 0
    // button: 1 4 2 (onmouseup)
    return button === 2 ? 2 : button === 4 ? 1 : 0;
  },
  buttons: null,
  relatedTarget: function (event) {
    return event.relatedTarget || (event.fromElement === event.srcElement ? event.toElement : event.fromElement);
  },
  // 鼠标距离文档（即页面内容）左边距的距离
  pageX: function (event) {
    return 'pageX' in event ? event.pageX : event.clientX + ViewportMetrics.currentScrollLeft;
  },
  // 鼠标距离文档（即页面内容）上边距的距离
  pageY: function (event) {
    return 'pageY' in event ? event.pageY : event.clientY + ViewportMetrics.currentScrollTop;
  }
};

// 在SyntheticUIEvent基础上为SyntheticMouseEvent实例添加screenX、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、button、buttons、relatedTarget、pageX、pageY属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticMouseEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticUIEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticUIEvent.augmentClass(SyntheticMouseEvent, MouseEventInterface);

module.exports = SyntheticMouseEvent;

SyntheticDragEvent.js

'use strict';

var SyntheticMouseEvent = require('./SyntheticMouseEvent');

var DragEventInterface = {
  dataTransfer: null
};

// 在SyntheticMouseEvent基础上为SyntheticDragEvent实例添加dataTransfer属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticDragEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticMouseEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticMouseEvent.augmentClass(SyntheticDragEvent, DragEventInterface);

module.exports = SyntheticDragEvent;

SyntheticWheelEvent.js

'use strict';

var SyntheticMouseEvent = require('./SyntheticMouseEvent');

var WheelEventInterface = {
  deltaX: function (event) {
    return 'deltaX' in event ? event.deltaX :
    // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
    'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
  },
  deltaY: function (event) {
    return 'deltaY' in event ? event.deltaY :
    // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
    'wheelDeltaY' in event ? -event.wheelDeltaY :
    // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
    'wheelDelta' in event ? -event.wheelDelta : 0;
  },
  deltaZ: null,

  // Browsers without "deltaMode" is reporting in raw wheel delta where one
  // notch on the scroll is always +/- 120, roughly equivalent to pixels.
  // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
  // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
  deltaMode: null
};

// 在SyntheticMouseEvent基础上为SyntheticWheelEvent实例添加deltaX、deltaY、deltaZ、deltaMode属性
// 该数据在适当时机(事件结束后)将予以销毁
function SyntheticWheelEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {
  return SyntheticMouseEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget);
}

SyntheticMouseEvent.augmentClass(SyntheticWheelEvent, WheelEventInterface);

module.exports = SyntheticWheelEvent;