From 9c3985bccd84f6d4c16cdaa59aa8f659c3681346 Mon Sep 17 00:00:00 2001 From: * <8> Date: Fri, 21 Jan 2022 14:57:00 +0800 Subject: [PATCH] Match-id-933351a5e5fc787d4d40d8a208c8d4c97281c275 --- libs/horizon/src/dom/DOMInternalKeys.ts | 2 +- .../src/event/ControlledValueUpdater.ts | 2 +- libs/horizon/src/event/EventBinding.ts | 35 ++++++++----------- libs/horizon/src/event/HorizonEventMain.ts | 29 ++++++--------- libs/horizon/src/event/ListenerGetter.ts | 22 +++++------- libs/horizon/src/event/WrapperListener.ts | 4 +-- libs/horizon/src/event/utils.ts | 4 +-- 7 files changed, 38 insertions(+), 60 deletions(-) diff --git a/libs/horizon/src/dom/DOMInternalKeys.ts b/libs/horizon/src/dom/DOMInternalKeys.ts index 3b59dd2d..068eb829 100644 --- a/libs/horizon/src/dom/DOMInternalKeys.ts +++ b/libs/horizon/src/dom/DOMInternalKeys.ts @@ -91,7 +91,7 @@ export function getEventListeners(dom: EventTarget): Set { return elementListeners; } -export function getEventToListenerMap(target: EventTarget): Map { +export function getNonDelegatedListenerMap(target: EventTarget): Map { let eventsMap = target[internalKeys.nonDelegatedEvents]; if (!eventsMap) { eventsMap = target[internalKeys.nonDelegatedEvents] = new Map(); diff --git a/libs/horizon/src/event/ControlledValueUpdater.ts b/libs/horizon/src/event/ControlledValueUpdater.ts index dde7f99b..417d9e13 100644 --- a/libs/horizon/src/event/ControlledValueUpdater.ts +++ b/libs/horizon/src/event/ControlledValueUpdater.ts @@ -2,7 +2,7 @@ import {getVNodeProps} from '../dom/DOMInternalKeys'; import {resetValue} from '../dom/valueHandler'; import {getDomTag} from '../dom/utils/Common'; -let updateList = null; +let updateList: Array | null = null; // 受控组件值重新赋值 function updateValue(target: Element) { diff --git a/libs/horizon/src/event/EventBinding.ts b/libs/horizon/src/event/EventBinding.ts index 068280ea..ee56bda4 100644 --- a/libs/horizon/src/event/EventBinding.ts +++ b/libs/horizon/src/event/EventBinding.ts @@ -5,16 +5,12 @@ import {allDelegatedNativeEvents} from './EventCollection'; import {isDocument} from '../dom/utils/Common'; import { getEventListeners, - getEventToListenerMap, + getNonDelegatedListenerMap, } from '../dom/DOMInternalKeys'; import {createCustomEventListener} from './WrapperListener'; import {CustomBaseEvent} from './customEvents/CustomBaseEvent'; -const listeningMarker = - '_horizonListening' + - Math.random() - .toString(36) - .slice(4); +const listeningMarker = '_horizonListening' + Math.random().toString(36).slice(4); // 获取节点上已经委托事件名称 function getListenerSetKey(nativeEvtName: string, isCapture: boolean): string { @@ -37,12 +33,8 @@ function listenToNativeEvent( const listenerSetKey = getListenerSetKey(nativeEvtName, isCapture); if (!listenerSet.has(listenerSetKey)) { - const listener = createCustomEventListener( - target, - nativeEvtName, - isCapture, - ); - target.addEventListener(nativeEvtName, listener, !!isCapture); + const listener = createCustomEventListener(target, nativeEvtName, isCapture); + target.addEventListener(nativeEvtName, listener, isCapture); listenerSet.add(listenerSetKey); } } @@ -54,11 +46,11 @@ export function listenDelegatedEvents(dom: Element) { return; } dom[listeningMarker] = true; - allDelegatedNativeEvents.forEach((eventName: string) => { + allDelegatedNativeEvents.forEach((nativeEvtName: string) => { // 委托冒泡事件 - listenToNativeEvent(eventName, dom, false); + listenToNativeEvent(nativeEvtName, dom, false); // 委托捕获事件 - listenToNativeEvent(eventName, dom, true); + listenToNativeEvent(nativeEvtName, dom, true); }); } @@ -86,7 +78,7 @@ function getIsCapture(horizonEventName) { // 封装监听函数 function getWrapperListener(horizonEventName, nativeEvtName, targetElement, listener) { - return (event) => { + return event => { const customEvent = new CustomBaseEvent(horizonEventName, nativeEvtName, event, null, targetElement); listener(customEvent); }; @@ -102,19 +94,20 @@ export function listenNonDelegatedEvent( const nativeEvtName = getNativeEvtName(horizonEventName, isCapture); // 先判断是否存在老的监听事件，若存在则移除 - const eventToListenerMap = getEventToListenerMap(domElement); - if (eventToListenerMap.get(horizonEventName)) { - domElement.removeEventListener(nativeEvtName, eventToListenerMap.get(horizonEventName)); + const nonDelegatedListenerMap = getNonDelegatedListenerMap(domElement); + const currentListener = nonDelegatedListenerMap.get(horizonEventName); + if (currentListener) { + domElement.removeEventListener(nativeEvtName, currentListener); } if (typeof listener !== 'function') { - eventToListenerMap.delete(nativeEvtName); + nonDelegatedListenerMap.delete(nativeEvtName); return; } // 为了和委托事件对外行为一致，将事件对象封装成CustomBaseEvent const wrapperListener = getWrapperListener(horizonEventName, nativeEvtName, domElement, listener); // 添加新的监听 - eventToListenerMap.set(horizonEventName, wrapperListener); + nonDelegatedListenerMap.set(horizonEventName, wrapperListener); domElement.addEventListener(nativeEvtName, wrapperListener, isCapture); } diff --git a/libs/horizon/src/event/HorizonEventMain.ts b/libs/horizon/src/event/HorizonEventMain.ts index 1ee6ba8b..0b861c26 100644 --- a/libs/horizon/src/event/HorizonEventMain.ts +++ b/libs/horizon/src/event/HorizonEventMain.ts @@ -1,4 +1,4 @@ -import type {AnyNativeEvent, ProcessingListenerList} from './types'; +import type {AnyNativeEvent, ProcessingListenerList} from './Types'; import type {VNode} from '../renderer/Types'; import { @@ -34,12 +34,12 @@ function getCommonListeners( target: null | EventTarget, isCapture: boolean, ): ProcessingListenerList { - const customEventName = getCustomEventNameWithOn(CommonEventToHorizonMap[nativeEvtName]); - if (!customEventName) { + const horizonEvtName = getCustomEventNameWithOn(CommonEventToHorizonMap[nativeEvtName]); + if (!horizonEvtName) { return []; } - // 火狐浏览器兼容。火狐浏览器下功能键将触发keypress事件 火狐下keypress的charcode有值，keycode为0 + // 火狐浏览器兼容。火狐浏览器下功能键将触发keypress事件 火狐下keypress的charCode有值，keyCode为0 if (nativeEvtName === 'keypress' && uniqueCharCode(nativeEvent) === 0) { return []; } @@ -52,23 +52,22 @@ function getCommonListeners( if (nativeEvtName === 'focusin') { nativeEvtName = 'focus'; } + if (nativeEvtName === 'focusout') { nativeEvtName = 'blur'; } - const customEvent = createCommonCustomEvent(customEventName, nativeEvtName, nativeEvent, null, target); + const horizonEvent = createCommonCustomEvent(horizonEvtName, nativeEvtName, nativeEvent, null, target); return getListenersFromTree( vNode, - customEventName, - customEvent, + horizonEvtName, + horizonEvent, isCapture ? EVENT_TYPE_CAPTURE: EVENT_TYPE_BUBBLE, ); } // 按顺序执行事件队列 -export function processListeners( - processingEventsList: ProcessingListenerList -): void { +function processListeners(processingEventsList: ProcessingListenerList): void { processingEventsList.forEach(eventUnitList => { let lastVNode; eventUnitList.forEach(eventUnit => { @@ -148,7 +147,7 @@ function triggerHorizonEvents( nativeEvtName: string, isCapture: boolean, nativeEvent: AnyNativeEvent, - vNode: null | VNode, + vNode: VNode, ): void { const nativeEventTarget = getEventTarget(nativeEvent); const processingListenerList = getProcessListenersFacade(nativeEvtName, vNode, nativeEvent, nativeEventTarget, isCapture); @@ -184,13 +183,7 @@ export function handleEventMain( // 没有事件在执行，经过调度再执行事件 isInEventsExecution = true; try { - return asyncUpdates(() => - triggerHorizonEvents( - nativeEvtName, - isCapture, - nativeEvent, - rootVNode, - )); + return asyncUpdates(() => triggerHorizonEvents(nativeEvtName, isCapture, nativeEvent, rootVNode)); } finally { isInEventsExecution = false; if (shouldUpdateValue()) { diff --git a/libs/horizon/src/event/ListenerGetter.ts b/libs/horizon/src/event/ListenerGetter.ts index 3c233c48..5d9c9169 100644 --- a/libs/horizon/src/event/ListenerGetter.ts +++ b/libs/horizon/src/event/ListenerGetter.ts @@ -7,11 +7,7 @@ import {ProcessingListenerList, ListenerUnitList} from './Types'; import {CustomBaseEvent} from './customEvents/CustomBaseEvent'; // 返回是否应该阻止事件响应标记，disabled组件不响应鼠标事件 -function shouldPrevent( - name: string, - type: string, - props: Props, -): boolean { +function shouldPrevent(eventName: string, type: string, props: Props): boolean { const canPreventMouseEvents = [ 'onClick', 'onClickCapture', @@ -26,17 +22,14 @@ function shouldPrevent( 'onMouseEnter', ]; const interActiveElements = ['button', 'input', 'select', 'textarea']; - if (canPreventMouseEvents.includes(name)) { + if (canPreventMouseEvents.includes(eventName)) { return !!(props.disabled && interActiveElements.includes(type)); } return false; } // 从vnode属性中获取事件listener -function getListener( - vNode: VNode, - eventName: string, -): Function | null { +function getListener(vNode: VNode, eventName: string): Function | null { const realNode = vNode.realNode; if (realNode === null) { return null; @@ -60,14 +53,14 @@ function getListener( // 获取监听事件 export function getListenersFromTree( targetVNode: VNode | null, - name: string | null, + horizonEvtName: string | null, horizonEvent: CustomBaseEvent, eventType: string, ): ProcessingListenerList { - if (!name) { + if (!horizonEvtName) { return []; } - const captureName = name + EVENT_TYPE_CAPTURE; + const listeners: ListenerUnitList = []; let vNode = targetVNode; @@ -77,6 +70,7 @@ export function getListenersFromTree( const {realNode, tag} = vNode; if (tag === DomComponent && realNode !== null) { if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_CAPTURE) { + const captureName = horizonEvtName + EVENT_TYPE_CAPTURE; const captureListener = getListener(vNode, captureName); if (captureListener) { listeners.unshift({ @@ -88,7 +82,7 @@ export function getListenersFromTree( } } if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_BUBBLE) { - const bubbleListener = getListener(vNode, name); + const bubbleListener = getListener(vNode, horizonEvtName); if (bubbleListener) { listeners.push({ vNode, diff --git a/libs/horizon/src/event/WrapperListener.ts b/libs/horizon/src/event/WrapperListener.ts index 9c73299c..0c0f0a6a 100644 --- a/libs/horizon/src/event/WrapperListener.ts +++ b/libs/horizon/src/event/WrapperListener.ts @@ -19,7 +19,7 @@ function triggerDelegatedEvent( nativeEvtName: string, isCapture: boolean, targetDom: EventTarget, - nativeEvent, + nativeEvent, // 事件对象event ) { // 执行之前的调度事件 runDiscreteUpdates(); @@ -33,7 +33,7 @@ function triggerDelegatedEvent( targetVNode = null; } } else { - // vnode已销毁 + // vNode已销毁 targetVNode = null; } } diff --git a/libs/horizon/src/event/utils.ts b/libs/horizon/src/event/utils.ts index a23e52da..182616a8 100644 --- a/libs/horizon/src/event/utils.ts +++ b/libs/horizon/src/event/utils.ts @@ -50,7 +50,5 @@ export function getCustomEventNameWithOn(name) { if (!name) { return ''; } - const capitalizedEvent = name[0].toUpperCase() + name.slice(1); - const horizonEventName = 'on' + capitalizedEvent; - return horizonEventName; + return 'on' + name[0].toUpperCase() + name.slice(1); }