From 1d0db9c84438e587dd29026bf0df21de0196388f Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 14 Feb 2022 15:47:21 +0800 Subject: [PATCH] Match-id-85ac75c971fa4ec6c390f3d9b8020aab00d82f32 --- libs/horizon/src/dom/DOMInternalKeys.ts | 16 +++-------- libs/horizon/src/event/EventBinding.ts | 27 +++++-------------- libs/horizon/src/event/EventCollection.ts | 1 + libs/horizon/src/event/ListenerGetter.ts | 2 ++ .../src/event/customEvents/CustomBaseEvent.ts | 3 ++- 5 files changed, 15 insertions(+), 34 deletions(-) diff --git a/libs/horizon/src/dom/DOMInternalKeys.ts b/libs/horizon/src/dom/DOMInternalKeys.ts index d8475d97..6ddbdb5b 100644 --- a/libs/horizon/src/dom/DOMInternalKeys.ts +++ b/libs/horizon/src/dom/DOMInternalKeys.ts @@ -19,7 +19,6 @@ const prefix = '_horizon'; const internalKeys = { VNode: `${prefix}VNode`, props: `${prefix}Props`, - events: `${prefix}Events`, nonDelegatedEvents: `${prefix}NonDelegatedEvents`, }; @@ -83,20 +82,11 @@ export function updateVNodeProps(dom: Element | Text, props: Props): void { dom[internalKeys.props] = props; } -export function getEventListeners(dom: EventTarget): Set { - let elementListeners = dom[internalKeys.events]; - if (!elementListeners) { - elementListeners = new Set(); - dom[internalKeys.events] = elementListeners; - } - return elementListeners; -} - -export function getNonDelegatedListenerMap(target: EventTarget): Map { - let eventsMap = target[internalKeys.nonDelegatedEvents]; +export function getNonDelegatedListenerMap(dom: Element | Text): Map { + let eventsMap = dom[internalKeys.nonDelegatedEvents]; if (!eventsMap) { eventsMap = new Map(); - target[internalKeys.nonDelegatedEvents] = eventsMap; + dom[internalKeys.nonDelegatedEvents] = eventsMap; } return eventsMap; } diff --git a/libs/horizon/src/event/EventBinding.ts b/libs/horizon/src/event/EventBinding.ts index c0de3daf..512e87b5 100644 --- a/libs/horizon/src/event/EventBinding.ts +++ b/libs/horizon/src/event/EventBinding.ts @@ -4,7 +4,6 @@ import {allDelegatedNativeEvents} from './EventCollection'; import {isDocument} from '../dom/utils/Common'; import { - getEventListeners, getNearestVNode, getNonDelegatedListenerMap, } from '../dom/DOMInternalKeys'; @@ -16,12 +15,6 @@ import {handleEventMain} from './HorizonEventMain'; 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 triggerDelegatedEvent( nativeEvtName: string, @@ -54,20 +47,14 @@ function listenToNativeEvent( delegatedElement: Element, isCapture: boolean, ): void { - let target: Element | Document = delegatedElement; + let dom: Element | Document = delegatedElement; // document层次可能触发selectionchange事件,为了捕获这类事件,selectionchange事件绑定在document节点上 if (nativeEvtName === 'selectionchange' && !isDocument(delegatedElement)) { - target = delegatedElement.ownerDocument; + dom = delegatedElement.ownerDocument; } - const listenerSet = getEventListeners(target); - const listenerSetKey = getListenerSetKey(nativeEvtName, isCapture); - - if (!listenerSet.has(listenerSetKey)) { - const listener = triggerDelegatedEvent.bind(null, nativeEvtName, isCapture, target); - target.addEventListener(nativeEvtName, listener, isCapture); - listenerSet.add(listenerSetKey); - } + const listener = triggerDelegatedEvent.bind(null, nativeEvtName, isCapture, dom); + dom.addEventListener(nativeEvtName, listener, isCapture); } // 监听所有委托事件 @@ -101,7 +88,7 @@ function getNativeEvtName(horizonEventName, capture) { } // 是否捕获事件 -function getIsCapture(horizonEventName) { +function isCaptureEvent(horizonEventName) { if (horizonEventName === 'onLostPointerCapture' || horizonEventName === 'onGotPointerCapture') { return false; } @@ -122,7 +109,7 @@ export function listenNonDelegatedEvent( domElement: Element, listener, ): void { - const isCapture = getIsCapture(horizonEventName); + const isCapture = isCaptureEvent(horizonEventName); const nativeEvtName = getNativeEvtName(horizonEventName, isCapture); // 先判断是否存在老的监听事件,若存在则移除 @@ -130,10 +117,10 @@ export function listenNonDelegatedEvent( const currentListener = nonDelegatedListenerMap.get(horizonEventName); if (currentListener) { domElement.removeEventListener(nativeEvtName, currentListener); + nonDelegatedListenerMap.delete(horizonEventName); } if (typeof listener !== 'function') { - nonDelegatedListenerMap.delete(nativeEvtName); return; } diff --git a/libs/horizon/src/event/EventCollection.ts b/libs/horizon/src/event/EventCollection.ts index 8163df63..d70dcf10 100644 --- a/libs/horizon/src/event/EventCollection.ts +++ b/libs/horizon/src/event/EventCollection.ts @@ -8,6 +8,7 @@ export const allDelegatedNativeEvents = new Set(); horizonEventToNativeMap.forEach((dependencies, horizonEvent) => { allDelegatedHorizonEvents.set(horizonEvent, dependencies); allDelegatedHorizonEvents.set(horizonEvent + 'Capture', dependencies); + dependencies.forEach(d => { allDelegatedNativeEvents.add(d); }); diff --git a/libs/horizon/src/event/ListenerGetter.ts b/libs/horizon/src/event/ListenerGetter.ts index 9ecf42fd..8c20b960 100644 --- a/libs/horizon/src/event/ListenerGetter.ts +++ b/libs/horizon/src/event/ListenerGetter.ts @@ -35,6 +35,7 @@ export function getListenersFromTree( }); } } + if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_BUBBLE) { const bubbleListener = vNode.props[horizonEvtName]; if (bubbleListener) { @@ -49,6 +50,7 @@ export function getListenersFromTree( } vNode = vNode.parent; } + return listeners; } diff --git a/libs/horizon/src/event/customEvents/CustomBaseEvent.ts b/libs/horizon/src/event/customEvents/CustomBaseEvent.ts index 3208ff29..e9ca60df 100644 --- a/libs/horizon/src/event/customEvents/CustomBaseEvent.ts +++ b/libs/horizon/src/event/customEvents/CustomBaseEvent.ts @@ -7,7 +7,8 @@ import {VNode} from '../../renderer/Types'; // 从原生事件中复制属性到自定义事件中 function extendAttribute(target, source) { let val; - for (let attr in source) { + let attr; + for (attr in source) { // 这两个方法需要override if (attr === 'preventDefault' || attr === 'stopPropagation') { continue;