Match-id-7ac125241fa134ee7baaca41cfcb10bee8c65f65
This commit is contained in:
*
*
parent
19a39513e6
commit
d76fcbb8ff
|
|
@ -0,0 +1,39 @@
|
|||
import {getVNodeProps} from '../dom/DOMInternalKeys';
|
||||
import {resetValue} from '../dom/valueHandler';
|
||||
import {getDomTag} from '../dom/utils/Common';
|
||||
|
||||
let updateList = null;
|
||||
|
||||
// 受控组件值重新赋值
|
||||
function updateValue(target: Element) {
|
||||
const props = getVNodeProps(target);
|
||||
if (props) {
|
||||
const type = getDomTag(target);
|
||||
resetValue(target, type, props);
|
||||
}
|
||||
}
|
||||
|
||||
// 存储队列中缓存组件
|
||||
export function addValueUpdateList(target: EventTarget): void {
|
||||
if (updateList) {
|
||||
updateList.push(target);
|
||||
} else {
|
||||
updateList = [target];
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否需要重新赋值
|
||||
export function shouldUpdateValue(): boolean {
|
||||
return updateList !== null && updateList.length > 0;
|
||||
}
|
||||
|
||||
// 从缓存队列中对受控组件进行赋值
|
||||
export function updateControlledValue() {
|
||||
if (!updateList) {
|
||||
return;
|
||||
}
|
||||
updateList.forEach(item => {
|
||||
updateValue(item);
|
||||
});
|
||||
updateList = null;
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
/**
|
||||
* 事件绑定实现
|
||||
*/
|
||||
import {allDelegatedNativeEvents} from './EventCollection';
|
||||
import {isDocument} from '../dom/utils/Common';
|
||||
import {
|
||||
getEventListeners,
|
||||
getEventToListenerMap,
|
||||
} from '../dom/DOMInternalKeys';
|
||||
import {createCustomEventListener} from './WrapperListener';
|
||||
import {CustomBaseEvent} from './customEvents/CustomBaseEvent';
|
||||
|
||||
const listeningMarker =
|
||||
'_horizonListening' +
|
||||
Math.random()
|
||||
.toString(36)
|
||||
.slice(4);
|
||||
|
||||
// 获取节点上已经委托事件名称
|
||||
function getListenerSetKey(nativeEvtName: string, isCapture: boolean): string {
|
||||
const sufix = isCapture ? 'capture' : 'bubble';
|
||||
return `${nativeEvtName}__${sufix}`;
|
||||
}
|
||||
|
||||
function listenToNativeEvent(
|
||||
nativeEvtName: string,
|
||||
delegatedElement: Element,
|
||||
isCapture: boolean,
|
||||
): void {
|
||||
let target: Element | Document = delegatedElement;
|
||||
// document层次可能触发selectionchange事件，为了捕获这类事件，selectionchange事件绑定在document节点上
|
||||
if (nativeEvtName === 'selectionchange' && !isDocument(delegatedElement)) {
|
||||
target = delegatedElement.ownerDocument;
|
||||
}
|
||||
|
||||
const listenerSet = getEventListeners(target);
|
||||
const listenerSetKey = getListenerSetKey(nativeEvtName, isCapture);
|
||||
|
||||
if (!listenerSet.has(listenerSetKey)) {
|
||||
const listener = createCustomEventListener(
|
||||
target,
|
||||
nativeEvtName,
|
||||
isCapture,
|
||||
);
|
||||
target.addEventListener(nativeEvtName, listener, !!isCapture);
|
||||
listenerSet.add(listenerSetKey);
|
||||
}
|
||||
}
|
||||
|
||||
// 监听所有委托事件
|
||||
export function listenDelegatedEvents(dom: Element) {
|
||||
if (dom[listeningMarker]) {
|
||||
// 不需要重复注册事件
|
||||
return;
|
||||
}
|
||||
dom[listeningMarker] = true;
|
||||
allDelegatedNativeEvents.forEach((eventName: string) => {
|
||||
// 委托冒泡事件
|
||||
listenToNativeEvent(eventName, dom, false);
|
||||
// 委托捕获事件
|
||||
listenToNativeEvent(eventName, dom, true);
|
||||
});
|
||||
}
|
||||
|
||||
// 通过horizon事件名获取到native事件名
|
||||
function getNativeEvtName(horizonEventName, capture) {
|
||||
let nativeName;
|
||||
if (capture) {
|
||||
nativeName = horizonEventName.slice(2, -7);
|
||||
} else {
|
||||
nativeName = horizonEventName.slice(2);
|
||||
}
|
||||
if (!nativeName) {
|
||||
return '';
|
||||
}
|
||||
return nativeName.toLowerCase();
|
||||
}
|
||||
|
||||
// 是否捕获事件
|
||||
function getIsCapture(horizonEventName) {
|
||||
if (horizonEventName === 'onLostPointerCapture' || horizonEventName === 'onGotPointerCapture') {
|
||||
return false;
|
||||
}
|
||||
return horizonEventName.slice(-7) === 'Capture';
|
||||
}
|
||||
|
||||
// 封装监听函数
|
||||
function getWrapperListener(horizonEventName, nativeEvtName, targetElement, listener) {
|
||||
return (event) => {
|
||||
const customEvent = new CustomBaseEvent(horizonEventName, nativeEvtName, event, null, targetElement);
|
||||
listener(customEvent);
|
||||
};
|
||||
}
|
||||
|
||||
// 非委托事件单独监听到各自dom节点
|
||||
export function listenNonDelegatedEvent(
|
||||
horizonEventName: string,
|
||||
domElement: Element,
|
||||
listener,
|
||||
): void {
|
||||
const isCapture = getIsCapture(horizonEventName);
|
||||
const nativeEvtName = getNativeEvtName(horizonEventName, isCapture);
|
||||
|
||||
// 先判断是否存在老的监听事件，若存在则移除
|
||||
const eventToListenerMap = getEventToListenerMap(domElement);
|
||||
if (eventToListenerMap.get(horizonEventName)) {
|
||||
domElement.removeEventListener(nativeEvtName, eventToListenerMap.get(horizonEventName));
|
||||
}
|
||||
|
||||
if (typeof listener !== 'function') {
|
||||
eventToListenerMap.delete(nativeEvtName);
|
||||
return;
|
||||
}
|
||||
|
||||
// 为了和委托事件对外行为一致，将事件对象封装成CustomBaseEvent
|
||||
const wrapperListener = getWrapperListener(horizonEventName, nativeEvtName, domElement, listener);
|
||||
// 添加新的监听
|
||||
eventToListenerMap.set(horizonEventName, wrapperListener);
|
||||
domElement.addEventListener(nativeEvtName, wrapperListener, isCapture);
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import {horizonEventToNativeMap} from './const';
|
||||
|
||||
// 需要委托的horizon事件和原生事件对应关系
|
||||
export const allDelegatedHorizonEvents = new Map();
|
||||
// 所有委托的原生事件集合
|
||||
export const allDelegatedNativeEvents = new Set();
|
||||
|
||||
horizonEventToNativeMap.forEach((dependencies, horizonEvent) => {
|
||||
allDelegatedHorizonEvents.set(horizonEvent, dependencies);
|
||||
allDelegatedHorizonEvents.set(horizonEvent + 'Capture', dependencies);
|
||||
dependencies.forEach(d => {
|
||||
allDelegatedNativeEvents.add(d);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// 处理事件的错误
|
||||
let hasError = false;
|
||||
let caughtError = null;
|
||||
|
||||
// 执行事件监听器，并且捕捉第一个错误，事件执行完成后抛出第一个错误
|
||||
export function runListenerAndCatchFirstError(listener, event) {
|
||||
try {
|
||||
listener(event);
|
||||
} catch (error) {
|
||||
if (!hasError) {
|
||||
hasError = true;
|
||||
caughtError = error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function throwCaughtEventError() {
|
||||
if (hasError) {
|
||||
const err = caughtError;
|
||||
caughtError = null;
|
||||
hasError = false;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
import type {AnyNativeEvent, ProcessingListenerList} from './types';
|
||||
import type {VNode} from '../renderer/Types';
|
||||
|
||||
import {
|
||||
CommonEventToHorizonMap,
|
||||
horizonEventToNativeMap,
|
||||
EVENT_TYPE_BUBBLE,
|
||||
EVENT_TYPE_CAPTURE,
|
||||
} from './const';
|
||||
import {
|
||||
throwCaughtEventError,
|
||||
runListenerAndCatchFirstError,
|
||||
} from './EventError';
|
||||
import {getListeners as getBeforeInputListeners} from './simulatedEvtHandler/BeforeInputEventHandler';
|
||||
import {getListeners as getCompositionListeners} from './simulatedEvtHandler/CompositionEventHandler';
|
||||
import {getListeners as getChangeListeners} from './simulatedEvtHandler/ChangeEventHandler';
|
||||
import {getListeners as getSelectionListeners} from './simulatedEvtHandler/SelectionEventHandler';
|
||||
import {
|
||||
getCustomEventNameWithOn,
|
||||
uniqueCharCode,
|
||||
getEventTarget
|
||||
} from './utils';
|
||||
import {createCommonCustomEvent} from './customEvents/EventFactory';
|
||||
import {getListenersFromTree} from './ListenerGetter';
|
||||
import {shouldUpdateValue, updateControlledValue} from './ControlledValueUpdater';
|
||||
import {asyncUpdates, runDiscreteUpdates} from '../renderer/Renderer';
|
||||
import {getExactNode} from '../renderer/vnode/VNodeUtils';
|
||||
|
||||
// 获取事件触发的普通事件监听方法队列
|
||||
function getCommonListeners(
|
||||
nativeEvtName: string,
|
||||
vNode: null | VNode,
|
||||
nativeEvent: AnyNativeEvent,
|
||||
target: null | EventTarget,
|
||||
isCapture: boolean,
|
||||
): ProcessingListenerList {
|
||||
const customEventName = getCustomEventNameWithOn(CommonEventToHorizonMap[nativeEvtName]);
|
||||
if (!customEventName) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 火狐浏览器兼容。火狐浏览器下功能键将触发keypress事件 火狐下keypress的charcode有值，keycode为0
|
||||
if (nativeEvtName === 'keypress' && uniqueCharCode(nativeEvent) === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 鼠标点击右键
|
||||
if (nativeEvent instanceof MouseEvent && nativeEvtName === 'click' && nativeEvent.button === 2) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (nativeEvtName === 'focusin') {
|
||||
nativeEvtName = 'focus';
|
||||
}
|
||||
if (nativeEvtName === 'focusout') {
|
||||
nativeEvtName = 'blur';
|
||||
}
|
||||
|
||||
const customEvent = createCommonCustomEvent(customEventName, nativeEvtName, nativeEvent, null, target);
|
||||
return getListenersFromTree(
|
||||
vNode,
|
||||
customEventName,
|
||||
customEvent,
|
||||
isCapture ? EVENT_TYPE_CAPTURE: EVENT_TYPE_BUBBLE,
|
||||
);
|
||||
}
|
||||
|
||||
// 按顺序执行事件队列
|
||||
export function processListeners(
|
||||
processingEventsList: ProcessingListenerList
|
||||
): void {
|
||||
processingEventsList.forEach(eventUnitList => {
|
||||
let lastVNode;
|
||||
eventUnitList.forEach(eventUnit => {
|
||||
const {vNode, currentTarget, listener, event} = eventUnit;
|
||||
if (vNode !== lastVNode && event.isPropagationStopped()) {
|
||||
return;
|
||||
}
|
||||
event.currentTarget = currentTarget;
|
||||
runListenerAndCatchFirstError(listener, event);
|
||||
event.currentTarget = null;
|
||||
lastVNode = vNode;
|
||||
});
|
||||
});
|
||||
// 执行所有事件后，重新throw遇到的第一个错误
|
||||
throwCaughtEventError();
|
||||
}
|
||||
|
||||
function getProcessListenersFacade(
|
||||
nativeEvtName: string,
|
||||
vNode: VNode,
|
||||
nativeEvent: AnyNativeEvent,
|
||||
target,
|
||||
isCapture: boolean
|
||||
): ProcessingListenerList {
|
||||
// 触发普通委托事件
|
||||
let processingListenerList: ProcessingListenerList = getCommonListeners(
|
||||
nativeEvtName,
|
||||
vNode,
|
||||
nativeEvent,
|
||||
target,
|
||||
isCapture,
|
||||
);
|
||||
|
||||
// 触发特殊handler委托事件
|
||||
if (!isCapture) {
|
||||
if (horizonEventToNativeMap.get('onChange').includes(nativeEvtName)) {
|
||||
processingListenerList = processingListenerList.concat(getChangeListeners(
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
vNode,
|
||||
target,
|
||||
));
|
||||
}
|
||||
|
||||
if (horizonEventToNativeMap.get('onSelect').includes(nativeEvtName)) {
|
||||
processingListenerList = processingListenerList.concat(getSelectionListeners(
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
vNode,
|
||||
target,
|
||||
));
|
||||
}
|
||||
|
||||
if (nativeEvtName === 'compositionend' || nativeEvtName === 'compositionstart' || nativeEvtName === 'compositionupdate') {
|
||||
processingListenerList = processingListenerList.concat(getCompositionListeners(
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
vNode,
|
||||
target,
|
||||
));
|
||||
}
|
||||
|
||||
if (horizonEventToNativeMap.get('onBeforeInput').includes(nativeEvtName)) {
|
||||
processingListenerList = processingListenerList.concat(getBeforeInputListeners(
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
vNode,
|
||||
target,
|
||||
));
|
||||
}
|
||||
}
|
||||
return processingListenerList;
|
||||
}
|
||||
|
||||
// 触发可以被执行的horizon事件监听
|
||||
function triggerHorizonEvents(
|
||||
nativeEvtName: string,
|
||||
isCapture: boolean,
|
||||
nativeEvent: AnyNativeEvent,
|
||||
vNode: null | VNode,
|
||||
): void {
|
||||
const nativeEventTarget = getEventTarget(nativeEvent);
|
||||
const processingListenerList = getProcessListenersFacade(nativeEvtName, vNode, nativeEvent, nativeEventTarget, isCapture);
|
||||
|
||||
// 处理触发的事件队列
|
||||
processListeners(processingListenerList);
|
||||
}
|
||||
|
||||
|
||||
// 其他事件正在执行中标记
|
||||
let isInEventsExecution = false;
|
||||
|
||||
export function handleEventMain(
|
||||
nativeEvtName: string,
|
||||
isCapture: boolean,
|
||||
nativeEvent: AnyNativeEvent,
|
||||
vNode: null | VNode,
|
||||
target: EventTarget,
|
||||
): void {
|
||||
let rootVNode = vNode;
|
||||
if (vNode !== null) {
|
||||
rootVNode = getExactNode(vNode, target);
|
||||
if (!rootVNode) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 有事件正在执行，同步执行事件
|
||||
if (isInEventsExecution) {
|
||||
return triggerHorizonEvents(nativeEvtName, isCapture, nativeEvent, rootVNode);
|
||||
}
|
||||
|
||||
// 没有事件在执行，经过调度再执行事件
|
||||
isInEventsExecution = true;
|
||||
try {
|
||||
return asyncUpdates(() =>
|
||||
triggerHorizonEvents(
|
||||
nativeEvtName,
|
||||
isCapture,
|
||||
nativeEvent,
|
||||
rootVNode,
|
||||
));
|
||||
} finally {
|
||||
isInEventsExecution = false;
|
||||
if (shouldUpdateValue()) {
|
||||
runDiscreteUpdates();
|
||||
updateControlledValue();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import {VNode} from '../renderer/Types';
|
||||
import {DomComponent} from '../renderer/vnode/VNodeTags';
|
||||
import {throwIfTrue} from '../renderer/utils/throwIfTrue';
|
||||
import type {Props} from '../dom/DOMOperator';
|
||||
import {EVENT_TYPE_ALL, EVENT_TYPE_CAPTURE, EVENT_TYPE_BUBBLE} from './const';
|
||||
import {ProcessingListenerList, ListenerUnitList} from './Types';
|
||||
import {CustomBaseEvent} from './customEvents/CustomBaseEvent';
|
||||
|
||||
// 返回是否应该阻止事件响应标记，disabled组件不响应鼠标事件
|
||||
function shouldPrevent(
|
||||
name: string,
|
||||
type: string,
|
||||
props: Props,
|
||||
): boolean {
|
||||
const canPreventMouseEvents = [
|
||||
'onClick',
|
||||
'onClickCapture',
|
||||
'onDoubleClick',
|
||||
'onDoubleClickCapture',
|
||||
'onMouseDown',
|
||||
'onMouseDownCapture',
|
||||
'onMouseMove',
|
||||
'onMouseMoveCapture',
|
||||
'onMouseUp',
|
||||
'onMouseUpCapture',
|
||||
'onMouseEnter',
|
||||
];
|
||||
const interActiveElements = ['button', 'input', 'select', 'textarea'];
|
||||
if (canPreventMouseEvents.includes(name)) {
|
||||
return !!(props.disabled && interActiveElements.includes(type));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 从vnode属性中获取事件listener
|
||||
function getListener(
|
||||
vNode: VNode,
|
||||
eventName: string,
|
||||
): Function | null {
|
||||
const realNode = vNode.realNode;
|
||||
if (realNode === null) {
|
||||
return null;
|
||||
}
|
||||
const props = vNode.props;
|
||||
if (props === null) {
|
||||
return null;
|
||||
}
|
||||
const listener = props[eventName];
|
||||
if (shouldPrevent(eventName, vNode.type, props)) {
|
||||
return null;
|
||||
}
|
||||
throwIfTrue(
|
||||
listener && typeof listener !== 'function',
|
||||
'`%s` listener should be a function.',
|
||||
eventName
|
||||
);
|
||||
return listener;
|
||||
}
|
||||
|
||||
// 获取监听事件
|
||||
export function getListenersFromTree(
|
||||
targetVNode: VNode | null,
|
||||
name: string | null,
|
||||
horizonEvent: CustomBaseEvent,
|
||||
eventType: string,
|
||||
): ProcessingListenerList {
|
||||
if (!name) {
|
||||
return [];
|
||||
}
|
||||
const captureName = name + EVENT_TYPE_CAPTURE;
|
||||
const listeners: ListenerUnitList = [];
|
||||
|
||||
let vNode = targetVNode;
|
||||
|
||||
// 从目标节点到根节点遍历获取listener
|
||||
while (vNode !== null) {
|
||||
const {realNode, tag} = vNode;
|
||||
if (tag === DomComponent && realNode !== null) {
|
||||
if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_CAPTURE) {
|
||||
const captureListener = getListener(vNode, captureName);
|
||||
if (captureListener) {
|
||||
listeners.unshift({
|
||||
vNode,
|
||||
listener: captureListener,
|
||||
currentTarget: realNode,
|
||||
event: horizonEvent,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_BUBBLE) {
|
||||
const bubbleListener = getListener(vNode, name);
|
||||
if (bubbleListener) {
|
||||
listeners.push({
|
||||
vNode,
|
||||
listener: bubbleListener,
|
||||
currentTarget: realNode,
|
||||
event: horizonEvent,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
vNode = vNode.parent;
|
||||
}
|
||||
return listeners.length > 0 ? [listeners]: [];
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* style中的动画事件
|
||||
*/
|
||||
|
||||
// style事件浏览器兼容前缀
|
||||
const vendorPrefixes = {
|
||||
animationend: {
|
||||
MozAnimation: 'mozAnimationEnd',
|
||||
WebkitAnimation: 'webkitAnimationEnd',
|
||||
animation: 'animationend',
|
||||
},
|
||||
animationiteration: {
|
||||
MozAnimation: 'mozAnimationIteration',
|
||||
WebkitAnimation: 'webkitAnimationIteration',
|
||||
animation: 'animationiteration',
|
||||
},
|
||||
animationstart: {
|
||||
MozAnimation: 'mozAnimationStart',
|
||||
WebkitAnimation: 'webkitAnimationStart',
|
||||
animation: 'animationstart',
|
||||
},
|
||||
transitionend: {
|
||||
MozTransition: 'mozTransitionEnd',
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
transition: 'transitionend',
|
||||
},
|
||||
};
|
||||
|
||||
// 获取属性中对应事件名
|
||||
function getEventNameByStyle(eventName) {
|
||||
const prefixMap = vendorPrefixes[eventName];
|
||||
if (!prefixMap) {
|
||||
return eventName;
|
||||
}
|
||||
const style = document.createElement('div').style
|
||||
for (const styleProp in prefixMap) {
|
||||
if (styleProp in style) {
|
||||
return prefixMap[styleProp];
|
||||
}
|
||||
}
|
||||
return eventName;
|
||||
}
|
||||
|
||||
export const STYLE_AMT_END: string = getEventNameByStyle(
|
||||
'animationend',
|
||||
);
|
||||
export const STYLE_AMT_ITERATION: string = getEventNameByStyle(
|
||||
'animationiteration',
|
||||
);
|
||||
export const STYLE_AMT_START: string = getEventNameByStyle(
|
||||
'animationstart',
|
||||
);
|
||||
export const STYLE_TRANS_END: string = getEventNameByStyle(
|
||||
'transitionend',
|
||||
);
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
import type {VNode} from '../renderer/Types';
|
||||
import {CustomBaseEvent} from './customEvents/CustomBaseEvent';
|
||||
|
||||
export type AnyNativeEvent = KeyboardEvent | MouseEvent | TouchEvent | UIEvent | Event;
|
||||
|
||||
export type ListenerUnit = {
|
||||
vNode: null | VNode,
|
||||
listener: Function,
|
||||
currentTarget: EventTarget,
|
||||
event: CustomBaseEvent,
|
||||
};
|
||||
|
||||
export type ListenerUnitList = Array<ListenerUnit>;
|
||||
|
||||
export type ProcessingListenerList = Array<ListenerUnitList>;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import {isMounted} from '../renderer/vnode/VNodeUtils';
|
||||
import {SuspenseComponent} from '../renderer/vnode/VNodeTags';
|
||||
import {getNearestVNode} from '../dom/DOMInternalKeys';
|
||||
import {handleEventMain} from './HorizonEventMain';
|
||||
import {runDiscreteUpdates} from '../renderer/Renderer';
|
||||
import {getEventTarget} from './utils';
|
||||
|
||||
// 生成委托事件的监听方法
|
||||
export function createCustomEventListener(
|
||||
target: EventTarget,
|
||||
nativeEvtName: string,
|
||||
isCapture: boolean,
|
||||
): EventListener {
|
||||
return triggerDelegatedEvent.bind(null, nativeEvtName, isCapture, target);
|
||||
}
|
||||
|
||||
// 触发委托事件
|
||||
function triggerDelegatedEvent(
|
||||
nativeEvtName: string,
|
||||
isCapture: boolean,
|
||||
targetDom: EventTarget,
|
||||
nativeEvent,
|
||||
) {
|
||||
// 执行之前的调度事件
|
||||
runDiscreteUpdates();
|
||||
|
||||
const nativeEventTarget = getEventTarget(nativeEvent);
|
||||
let targetVNode = getNearestVNode(nativeEventTarget);
|
||||
|
||||
if (targetVNode !== null) {
|
||||
if (isMounted(targetVNode)) {
|
||||
if (targetVNode.tag === SuspenseComponent) {
|
||||
targetVNode = null;
|
||||
}
|
||||
} else {
|
||||
// vnode已销毁
|
||||
targetVNode = null;
|
||||
}
|
||||
}
|
||||
handleEventMain(nativeEvtName, isCapture, nativeEvent, targetVNode, targetDom);
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import {
|
||||
STYLE_AMT_END,
|
||||
STYLE_AMT_ITERATION,
|
||||
STYLE_AMT_START,
|
||||
STYLE_TRANS_END
|
||||
} from './StyleEventNames';
|
||||
|
||||
// Horizon事件和原生事件对应关系
|
||||
export const horizonEventToNativeMap = new Map([
|
||||
['onKeyPress', ['keypress']],
|
||||
['onTextInput', ['textInput']],
|
||||
['onClick', ['click']],
|
||||
['onDoubleClick', ['dblclick']],
|
||||
['onFocus', ['focusin']],
|
||||
['onBlur', ['focusout']],
|
||||
['onInput', ['input']],
|
||||
['onMouseOut', ['mouseout']],
|
||||
['onMouseOver', ['mouseover']],
|
||||
['onPointerOut', ['pointerout']],
|
||||
['onPointerOver', ['pointerover']],
|
||||
['onContextMenu', ['contextmenu']],
|
||||
['onDragEnd', ['dragend']],
|
||||
['onKeyDown', ['keydown']],
|
||||
['onKeyUp', ['keyup']],
|
||||
['onMouseDown', ['mousedown']],
|
||||
['onMouseMove', ['mousemove']],
|
||||
['onMouseUp', ['mouseup']],
|
||||
['onSelectChange', ['selectionchange']],
|
||||
['onTouchEnd', ['touchend']],
|
||||
['onTouchMove', ['touchmove']],
|
||||
['onTouchStart', ['touchstart']],
|
||||
|
||||
['onCompositionEnd', ['compositionend']],
|
||||
['onCompositionStart', ['compositionstart']],
|
||||
['onCompositionUpdate', ['compositionupdate']],
|
||||
['onBeforeInput', ['compositionend', 'keypress', 'textInput']],
|
||||
['onChange', ['change', 'click', 'focusout', 'input',]],
|
||||
['onSelect', ['focusout', 'contextmenu', 'dragend', 'focusin', 'keydown', 'keyup', 'mousedown', 'mouseup', 'selectionchange']],
|
||||
|
||||
['onAnimationEnd', [STYLE_AMT_END]],
|
||||
['onAnimationIteration', [STYLE_AMT_ITERATION]],
|
||||
['onAnimationStart', [STYLE_AMT_START]],
|
||||
['onTransitionEnd', [STYLE_TRANS_END]]
|
||||
]);
|
||||
|
||||
export const CommonEventToHorizonMap = {
|
||||
click: 'click',
|
||||
dblclick: 'doubleClick',
|
||||
contextmenu: 'contextMenu',
|
||||
dragend: 'dragEnd',
|
||||
focusin: 'focus',
|
||||
focusout: 'blur',
|
||||
input: 'input',
|
||||
keydown: 'keyDown',
|
||||
keypress: 'keyPress',
|
||||
keyup: 'keyUp',
|
||||
mousedown: 'mouseDown',
|
||||
mouseup: 'mouseUp',
|
||||
touchend: 'touchEnd',
|
||||
touchstart: 'touchStart',
|
||||
mousemove: 'mouseMove',
|
||||
mouseout: 'mouseOut',
|
||||
mouseover: 'mouseOver',
|
||||
pointermove: 'pointerMove',
|
||||
pointerout: 'pointerOut',
|
||||
pointerover: 'pointerOver',
|
||||
selectionchange: 'selectChange',
|
||||
textInput: 'textInput',
|
||||
touchmove: 'touchMove',
|
||||
[STYLE_AMT_END]: 'animationEnd',
|
||||
[STYLE_AMT_ITERATION]: 'animationIteration',
|
||||
[STYLE_AMT_START]: 'animationStart',
|
||||
[STYLE_TRANS_END]: 'transitionEnd',
|
||||
};
|
||||
|
||||
export const CHAR_CODE_ENTER = 13;
|
||||
export const CHAR_CODE_SPACE = 32;
|
||||
|
||||
|
||||
export const EVENT_TYPE_BUBBLE = 'Bubble';
|
||||
export const EVENT_TYPE_CAPTURE = 'Capture';
|
||||
export const EVENT_TYPE_ALL = 'All';
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* 自定义的基本事件类型
|
||||
*/
|
||||
|
||||
import {VNode} from '../../renderer/Types';
|
||||
|
||||
export class CustomBaseEvent {
|
||||
|
||||
data: string;
|
||||
defaultPrevented: boolean;
|
||||
customEventName: string;
|
||||
targetVNode: VNode;
|
||||
type: string;
|
||||
nativeEvent: any;
|
||||
target: EventTarget;
|
||||
timeStamp: number;
|
||||
isDefaultPrevented: () => boolean;
|
||||
isPropagationStopped: () => boolean;
|
||||
currentTarget: EventTarget;
|
||||
|
||||
constructor(
|
||||
customEvtName: string | null,
|
||||
nativeEvtName: string,
|
||||
nativeEvt: { [propName: string]: any },
|
||||
vNode: VNode,
|
||||
target: null | EventTarget
|
||||
) {
|
||||
// 复制原生属性到自定义事件
|
||||
extendAttribute(this, nativeEvt);
|
||||
|
||||
// custom事件自定义属性
|
||||
this.customEventName = customEvtName;
|
||||
this.targetVNode = vNode;
|
||||
this.type = nativeEvtName;
|
||||
this.nativeEvent = nativeEvt;
|
||||
this.target = target;
|
||||
this.timeStamp = nativeEvt.timeStamp || Date.now();
|
||||
|
||||
const defaultPrevented = nativeEvt.defaultPrevented != null ? nativeEvt.defaultPrevented : nativeEvt.returnValue === false;
|
||||
this.defaultPrevented = defaultPrevented;
|
||||
|
||||
this.preventDefault = this.preventDefault.bind(this);
|
||||
this.stopPropagation = this.stopPropagation.bind(this);
|
||||
this.isDefaultPrevented = () => defaultPrevented;
|
||||
this.isPropagationStopped = () => false;
|
||||
}
|
||||
|
||||
// 兼容性方法
|
||||
persist() {
|
||||
|
||||
}
|
||||
|
||||
// 阻止默认行为
|
||||
preventDefault() {
|
||||
this.defaultPrevented = true;
|
||||
if (!this.nativeEvent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof this.nativeEvent.preventDefault === 'function') {
|
||||
this.nativeEvent.preventDefault();
|
||||
}
|
||||
this.nativeEvent.returnValue = false;
|
||||
this.isDefaultPrevented = () => true;
|
||||
}
|
||||
|
||||
// 停止冒泡
|
||||
stopPropagation() {
|
||||
if (!this.nativeEvent) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof this.nativeEvent.stopPropagation === 'function') {
|
||||
this.nativeEvent.stopPropagation();
|
||||
}
|
||||
this.nativeEvent.cancelBubble = true;
|
||||
this.isPropagationStopped = () => true;
|
||||
}
|
||||
}
|
||||
|
||||
// 从原生事件中复制属性到自定义事件中
|
||||
function extendAttribute(target, source) {
|
||||
const attributes = [
|
||||
// AnimationEvent
|
||||
'animationName', 'elapsedTime', 'pseudoElement',
|
||||
// CompositionEvent、InputEvent
|
||||
'data',
|
||||
// DragEvent
|
||||
'dataTransfer',
|
||||
// FocusEvent
|
||||
'relatedTarget',
|
||||
// KeyboardEvent
|
||||
'key', 'keyCode', 'charCode', 'code', 'location', 'ctrlKey', 'shiftKey', 'altKey', 'metaKey', 'repeat', 'locale', 'getModifierState', 'clipboardData',
|
||||
// MouseEvent
|
||||
'button', 'buttons', 'clientX', 'clientY', 'movementX', 'movementY', 'pageX', 'pageY', 'screenX', 'screenY', 'currentTarget',
|
||||
// PointerEvent
|
||||
'pointerId', 'width', 'height', 'pressure', 'tangentialPressure', 'tiltX', 'tiltY', 'twist', 'pointerType', 'isPrimary',
|
||||
// TouchEvent
|
||||
'touches', 'targetTouches', 'changedTouches',
|
||||
// TransitionEvent
|
||||
'propertyName',
|
||||
// UIEvent
|
||||
'view', 'detail',
|
||||
// WheelEvent
|
||||
'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
|
||||
];
|
||||
|
||||
attributes.forEach(attr => {
|
||||
if (typeof source[attr] !== 'undefined') {
|
||||
if (typeof source[attr] === 'function') {
|
||||
target[attr] = function() {
|
||||
return source[attr].apply(source, arguments);
|
||||
};
|
||||
} else {
|
||||
target[attr] = source[attr];
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
* 自定义键盘事件
|
||||
*/
|
||||
|
||||
import type {VNode} from '../../renderer/Types';
|
||||
import {uniqueCharCode} from '../utils';
|
||||
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||
import {CHAR_CODE_ENTER} from '../const';
|
||||
|
||||
const uniqueKeyMap = new Map([
|
||||
['Esc', 'Escape'],
|
||||
['Spacebar', ' '],
|
||||
['Left', 'ArrowLeft'],
|
||||
['Up', 'ArrowUp'],
|
||||
['Right', 'ArrowRight'],
|
||||
['Down', 'ArrowDown'],
|
||||
['Del', 'Delete'],
|
||||
]);
|
||||
|
||||
const charCodeToKeyMap = new Map([
|
||||
[8, 'Backspace'],
|
||||
[9, 'Tab'],
|
||||
[13, 'Enter'],
|
||||
[16, 'Shift'],
|
||||
[17, 'Control'],
|
||||
[18, 'Alt'],
|
||||
[19, 'Pause'],
|
||||
[27, 'Escape'],
|
||||
[32, ' '],
|
||||
[33, 'PageUp'],
|
||||
[34, 'PageDown'],
|
||||
[35, 'End'],
|
||||
[36, 'Home'],
|
||||
[37, 'ArrowLeft'],
|
||||
[38, 'ArrowUp'],
|
||||
[39, 'ArrowRight'],
|
||||
[40, 'ArrowDown'],
|
||||
[46, 'Delete']
|
||||
]);
|
||||
|
||||
function getKey(event) {
|
||||
if (event.key) {
|
||||
return uniqueKeyMap.get(event.key) || event.key;
|
||||
}
|
||||
|
||||
if (event.type === 'keypress') {
|
||||
const charCode = uniqueCharCode(event);
|
||||
return charCode === CHAR_CODE_ENTER ? 'Enter' : String.fromCharCode(charCode);
|
||||
}
|
||||
|
||||
if (event.type === 'keydown' || event.type === 'keyup') {
|
||||
return charCodeToKeyMap.get(event.keyCode);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
export class CustomKeyboardEvent extends CustomBaseEvent {
|
||||
|
||||
key: string;
|
||||
charCode: number;
|
||||
keyCode: number;
|
||||
which: number;
|
||||
|
||||
constructor(
|
||||
customEvtName: string | null,
|
||||
nativeEvtName: string,
|
||||
nativeEvt: { [propName: string]: any },
|
||||
vNode: VNode,
|
||||
target: null | EventTarget
|
||||
) {
|
||||
super(customEvtName, nativeEvtName, nativeEvt, vNode, target);
|
||||
this.key = getKey(nativeEvt);
|
||||
this.charCode = nativeEvtName === 'keypress' ? uniqueCharCode(nativeEvt) : 0;
|
||||
this.keyCode = (nativeEvtName === 'keydown' || nativeEvtName === 'keyup') ? nativeEvt.keyCode : 0;
|
||||
this.which = this.charCode || this.keyCode;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import type {VNode} from '../../renderer/Types';
|
||||
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||
|
||||
export class CustomMouseEvent extends CustomBaseEvent {
|
||||
relatedTarget: EventTarget;
|
||||
|
||||
constructor(
|
||||
customEvtName: string | null,
|
||||
nativeEvtName: string,
|
||||
nativeEvt: { [propName: string]: any },
|
||||
vNode: VNode,
|
||||
target: null | EventTarget
|
||||
) {
|
||||
super(customEvtName, nativeEvtName, nativeEvt, vNode, target);
|
||||
|
||||
let relatedTarget = nativeEvt.relatedTarget;
|
||||
if (relatedTarget === undefined) {
|
||||
if (nativeEvt.fromElement === nativeEvt.srcElement) {
|
||||
relatedTarget = nativeEvt.toElement;
|
||||
} else {
|
||||
relatedTarget = nativeEvt.fromElement;
|
||||
}
|
||||
}
|
||||
this.relatedTarget = relatedTarget;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import {CustomKeyboardEvent} from './CustomKeyboardEvent';
|
||||
import {CustomMouseEvent} from './CustomMouseEvent';
|
||||
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||
|
||||
const CommonEventToCustom = {
|
||||
keypress: CustomKeyboardEvent,
|
||||
keydown: CustomKeyboardEvent,
|
||||
keyup: CustomKeyboardEvent,
|
||||
click: CustomMouseEvent,
|
||||
dblclick: CustomMouseEvent,
|
||||
mousedown: CustomMouseEvent,
|
||||
mousemove: CustomMouseEvent,
|
||||
mouseup: CustomMouseEvent,
|
||||
mouseout: CustomMouseEvent,
|
||||
mouseover: CustomMouseEvent,
|
||||
contextmenu: CustomMouseEvent,
|
||||
pointercancel: CustomMouseEvent,
|
||||
pointerdown: CustomMouseEvent,
|
||||
pointermove: CustomMouseEvent,
|
||||
pointerout: CustomMouseEvent,
|
||||
pointerover: CustomMouseEvent,
|
||||
pointerup: CustomMouseEvent,
|
||||
}
|
||||
|
||||
// 创建普通自定义事件对象实例，和原生事件对应
|
||||
export function createCommonCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
||||
const EventConstructor = CommonEventToCustom[nativeEvtName] || CustomBaseEvent;
|
||||
return new EventConstructor(
|
||||
customEventName,
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
vNode,
|
||||
currentTarget,
|
||||
);
|
||||
}
|
||||
|
||||
// 创建模拟事件实例对象,需要handler特殊处理
|
||||
export function createHandlerCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
||||
return new CustomMouseEvent(
|
||||
customEventName,
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
vNode,
|
||||
currentTarget,
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import type {VNode} from '../../renderer/Types';
|
||||
import type {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||
import {getListenersFromTree} from '../ListenerGetter';
|
||||
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||
import {CHAR_CODE_SPACE, EVENT_TYPE_ALL} from '../const';
|
||||
import {CustomBaseEvent} from '../customEvents/CustomBaseEvent';
|
||||
const SPACE_CHAR = String.fromCharCode(CHAR_CODE_SPACE);
|
||||
|
||||
function getInputCharsByNative(
|
||||
eventName: string,
|
||||
nativeEvent: any,
|
||||
): string | void {
|
||||
if (eventName === 'compositionend') {
|
||||
return (nativeEvent.detail && nativeEvent.detail.data) || null;
|
||||
}
|
||||
if (eventName === 'keypress') {
|
||||
return nativeEvent.which === CHAR_CODE_SPACE ? SPACE_CHAR : null;
|
||||
}
|
||||
if (eventName === 'textInput') {
|
||||
return nativeEvent.data === SPACE_CHAR ? null : nativeEvent.data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 自定义beforeInput的hook事件处理
|
||||
export function getListeners(
|
||||
nativeEvtName: string,
|
||||
nativeEvent: AnyNativeEvent,
|
||||
vNode: null | VNode,
|
||||
target: null | EventTarget,
|
||||
): ProcessingListenerList {
|
||||
const chars = getInputCharsByNative(nativeEvtName, nativeEvent);
|
||||
// 无字符将要输入，无需处理
|
||||
if (!chars) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const event: CustomBaseEvent = createHandlerCustomEvent(
|
||||
'onBeforeInput',
|
||||
'beforeinput',
|
||||
nativeEvent,
|
||||
null,
|
||||
target,
|
||||
);
|
||||
event.data = chars;
|
||||
|
||||
return getListenersFromTree(vNode, 'onBeforeInput', event, EVENT_TYPE_ALL);
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||
import {getDom} from '../../dom/DOMInternalKeys';
|
||||
import {isInputValueChanged} from '../../dom/valueHandler/ValueChangeHandler';
|
||||
import {addValueUpdateList} from '../ControlledValueUpdater';
|
||||
import {isTextInputElement} from '../utils';
|
||||
import {EVENT_TYPE_ALL} from '../const';
|
||||
import {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||
import {
|
||||
getListenersFromTree,
|
||||
} from '../ListenerGetter';
|
||||
import {VNode} from '../../renderer/Types';
|
||||
import {getDomTag} from '../../dom/utils/Common';
|
||||
|
||||
// 返回是否需要触发change事件标记
|
||||
function shouldTriggerChangeEvent(targetDom, evtName) {
|
||||
const { type } = targetDom;
|
||||
const domTag = getDomTag(targetDom);
|
||||
|
||||
if (domTag === 'select' || (domTag === 'input' && type === 'file')) {
|
||||
return evtName === 'change';
|
||||
} else if (isTextInputElement(targetDom)) {
|
||||
if (evtName === 'input' || evtName === 'change') {
|
||||
return isInputValueChanged(targetDom);
|
||||
}
|
||||
} else if (domTag === 'input' && (type === 'checkbox' || type === 'radio')) {
|
||||
if (evtName === 'click') {
|
||||
return isInputValueChanged(targetDom);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 支持input/textarea/select的onChange事件
|
||||
*/
|
||||
export function getListeners(
|
||||
nativeEvtName: string,
|
||||
nativeEvt: AnyNativeEvent,
|
||||
vNode: null | VNode,
|
||||
target: null | EventTarget,
|
||||
): ProcessingListenerList {
|
||||
if (!vNode) {
|
||||
return [];
|
||||
}
|
||||
const targetDom = getDom(vNode);
|
||||
|
||||
// 判断是否需要触发change事件
|
||||
if (shouldTriggerChangeEvent(targetDom, nativeEvtName)) {
|
||||
addValueUpdateList(target);
|
||||
const event = createHandlerCustomEvent(
|
||||
'onChange',
|
||||
'change',
|
||||
nativeEvt,
|
||||
null,
|
||||
target,
|
||||
);
|
||||
return getListenersFromTree(vNode, 'onChange', event, EVENT_TYPE_ALL);
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import type {VNode} from '../../renderer/Types';
|
||||
import type {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||
import {getListenersFromTree} from '../ListenerGetter';
|
||||
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||
import {EVENT_TYPE_ALL} from '../const';
|
||||
|
||||
const compositionEventObj = {
|
||||
compositionstart: 'onCompositionStart',
|
||||
compositionend: 'onCompositionEnd',
|
||||
compositionupdate: 'onCompositionUpdate',
|
||||
};
|
||||
|
||||
// compoisition事件主要处理中文输入法输入时的触发事件
|
||||
export function getListeners(
|
||||
evtName: string,
|
||||
nativeEvt: AnyNativeEvent,
|
||||
vNode: null | VNode,
|
||||
target: null | EventTarget,
|
||||
): ProcessingListenerList {
|
||||
const evtType = compositionEventObj[evtName];
|
||||
|
||||
const event = createHandlerCustomEvent(
|
||||
evtType,
|
||||
evtName,
|
||||
nativeEvt,
|
||||
null,
|
||||
target,
|
||||
);
|
||||
return getListenersFromTree(vNode, evtType, event, EVENT_TYPE_ALL);
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import {createHandlerCustomEvent} from '../customEvents/EventFactory';
|
||||
import {shallowCompare} from '../../renderer/utils/compare';
|
||||
import {getFocusedDom} from '../../dom/utils/Common';
|
||||
import {getDom} from '../../dom/DOMInternalKeys';
|
||||
import {isDocument} from '../../dom/utils/Common';
|
||||
import {isTextInputElement} from '../utils';
|
||||
import type {AnyNativeEvent, ProcessingListenerList} from '../Types';
|
||||
import {getListenersFromTree} from '../ListenerGetter';
|
||||
import type {VNode} from '../../renderer/Types';
|
||||
import {EVENT_TYPE_ALL} from '../const';
|
||||
|
||||
const horizonEventName = 'onSelect'
|
||||
|
||||
let currentElement = null;
|
||||
let currentVNode = null;
|
||||
let lastSelection = null;
|
||||
|
||||
function initTargetCache(dom, vNode) {
|
||||
if (isTextInputElement(dom) || dom.contentEditable === 'true') {
|
||||
currentElement = dom;
|
||||
currentVNode = vNode;
|
||||
lastSelection = null;
|
||||
}
|
||||
}
|
||||
|
||||
function clearTargetCache() {
|
||||
currentElement = null;
|
||||
currentVNode = null;
|
||||
lastSelection = null;
|
||||
}
|
||||
|
||||
// 标记是否在鼠标事件过程中
|
||||
let isInMouseEvent = false;
|
||||
|
||||
// 获取节点所在的document对象
|
||||
function getDocument(eventTarget) {
|
||||
if (eventTarget.window === eventTarget) {
|
||||
return eventTarget.document;
|
||||
}
|
||||
if (isDocument(eventTarget)) {
|
||||
return eventTarget;
|
||||
}
|
||||
return eventTarget.ownerDocument;
|
||||
}
|
||||
|
||||
function getSelectEvent(nativeEvent, target) {
|
||||
const doc = getDocument(target);
|
||||
if (isInMouseEvent || currentElement == null || currentElement !== getFocusedDom(doc)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const currentSelection = window.getSelection();
|
||||
if (!shallowCompare(lastSelection, currentSelection)) {
|
||||
lastSelection = currentSelection;
|
||||
|
||||
const event = createHandlerCustomEvent(
|
||||
horizonEventName,
|
||||
'select',
|
||||
nativeEvent,
|
||||
null,
|
||||
target,
|
||||
);
|
||||
event.target = currentElement;
|
||||
|
||||
return getListenersFromTree(
|
||||
currentVNode,
|
||||
horizonEventName,
|
||||
event,
|
||||
EVENT_TYPE_ALL
|
||||
);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 该插件创建一个onSelect事件
|
||||
* 支持元素： input、textarea、contentEditable元素
|
||||
* 触发场景：用户输入、折叠选择、文本选择
|
||||
*/
|
||||
export function getListeners(
|
||||
name: string,
|
||||
nativeEvt: AnyNativeEvent,
|
||||
vNode: null | VNode,
|
||||
target: null | EventTarget,
|
||||
): ProcessingListenerList {
|
||||
const targetNode = vNode ? getDom(vNode) : window;
|
||||
let eventUnitList = [];
|
||||
switch (name) {
|
||||
case 'focusin':
|
||||
initTargetCache(targetNode, vNode);
|
||||
return eventUnitList;
|
||||
case 'focusout':
|
||||
clearTargetCache();
|
||||
return eventUnitList;
|
||||
case 'mousedown':
|
||||
isInMouseEvent = true;
|
||||
return eventUnitList;
|
||||
case 'contextmenu':
|
||||
case 'mouseup':
|
||||
case 'dragend':
|
||||
isInMouseEvent = false;
|
||||
eventUnitList = getSelectEvent(nativeEvt, target);
|
||||
break;
|
||||
case 'selectionchange':
|
||||
case 'keydown':
|
||||
case 'keyup':
|
||||
eventUnitList = getSelectEvent(nativeEvt, target);
|
||||
}
|
||||
return eventUnitList;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import {isText} from '../dom/utils/Common';
|
||||
import { CHAR_CODE_ENTER, CHAR_CODE_SPACE } from './const';
|
||||
|
||||
export function uniqueCharCode(nativeEvent): number {
|
||||
let charCode = nativeEvent.charCode;
|
||||
|
||||
// 火狐浏览器没有设置enter键的charCode，用keyCode
|
||||
if (charCode === 0 && nativeEvent.keyCode === CHAR_CODE_ENTER) {
|
||||
charCode = CHAR_CODE_ENTER;
|
||||
}
|
||||
|
||||
// 当ctrl按下时10表示enter键按下
|
||||
if (charCode === 10) {
|
||||
charCode = CHAR_CODE_ENTER;
|
||||
}
|
||||
|
||||
// 忽略非打印的Enter键
|
||||
if (charCode >= CHAR_CODE_SPACE || charCode === CHAR_CODE_ENTER) {
|
||||
return charCode;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
// 获取事件的target对象
|
||||
export function getEventTarget(nativeEvent) {
|
||||
const target = nativeEvent.target || nativeEvent.srcElement || window;
|
||||
if (isText(target)) {
|
||||
return target.parentNode;
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
// 支持的输入框类型
|
||||
const supportedInputTypes = ['color', 'date', 'datetime', 'datetime-local', 'email', 'month',
|
||||
'number', 'password', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'];
|
||||
|
||||
export function isTextInputElement(dom?: HTMLElement): boolean {
|
||||
if (dom instanceof HTMLInputElement) {
|
||||
return supportedInputTypes.includes(dom.type);
|
||||
}
|
||||
|
||||
const nodeName = dom && dom.nodeName && dom.nodeName.toLowerCase();
|
||||
return nodeName === 'textarea';
|
||||
}
|
||||
|
||||
|
||||
// 例：dragEnd -> onDragEnd
|
||||
export function getCustomEventNameWithOn(name) {
|
||||
if (!name) {
|
||||
return '';
|
||||
}
|
||||
const capitalizedEvent = name[0].toUpperCase() + name.slice(1);
|
||||
const horizonEventName = 'on' + capitalizedEvent;
|
||||
return horizonEventName;
|
||||
}
|
||||
Loading…
Reference in New Issue