Match-id-a3b2eeb82bb9e33e7bdf2d85c9fb79f7ed120f69
This commit is contained in:
*
*
commit
dbb26947d9
|
|
@ -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,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