Match-id-933351a5e5fc787d4d40d8a208c8d4c97281c275

libs/horizon/src/dom/DOMInternalKeys.ts

@@ -91,7 +91,7 @@ export function getEventListeners(dom: EventTarget): Set<string> {
   return elementListeners;
 }
 
-export function getEventToListenerMap(target: EventTarget): Map<string, EventListener> {
+export function getNonDelegatedListenerMap(target: EventTarget): Map<string, EventListener> {
   let eventsMap = target[internalKeys.nonDelegatedEvents];
   if (!eventsMap) {
     eventsMap = target[internalKeys.nonDelegatedEvents] = new Map();

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<any> | null = null;
 
 // 受控组件值重新赋值
 function updateValue(target: Element) {

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 =
+const listeningMarker = '_horizonListening' + Math.random().toString(36).slice(4);
-  '_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(
+    const listener = createCustomEventListener(target, nativeEvtName, isCapture);
-      target,
+    target.addEventListener(nativeEvtName, listener, isCapture);
-      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);
+  const nonDelegatedListenerMap = getNonDelegatedListenerMap(domElement);
-  if (eventToListenerMap.get(horizonEventName)) {
+  const currentListener = nonDelegatedListenerMap.get(horizonEventName);
-    domElement.removeEventListener(nativeEvtName, eventToListenerMap.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);
 }

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]);
+  const horizonEvtName = getCustomEventNameWithOn(CommonEventToHorizonMap[nativeEvtName]);
-  if (!customEventName) {
+  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,
+    horizonEvtName,
-    customEvent,
+    horizonEvent,
     isCapture ? EVENT_TYPE_CAPTURE: EVENT_TYPE_BUBBLE,
   );
 }
 
 // 按顺序执行事件队列
-export function processListeners(
+function processListeners(processingEventsList: ProcessingListenerList): void {
-  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(() =>
+    return asyncUpdates(() => triggerHorizonEvents(nativeEvtName, isCapture, nativeEvent, rootVNode));
-      triggerHorizonEvents(
-        nativeEvtName,
-        isCapture,
-        nativeEvent,
-        rootVNode,
-      ));
   } finally {
     isInEventsExecution = false;
     if (shouldUpdateValue()) {

libs/horizon/src/event/ListenerGetter.ts

@@ -7,11 +7,7 @@ import {ProcessingListenerList, ListenerUnitList} from './Types';
 import {CustomBaseEvent} from './customEvents/CustomBaseEvent';
 
 // 返回是否应该阻止事件响应标记，disabled组件不响应鼠标事件
-function shouldPrevent(
+function shouldPrevent(eventName: string, type: string, props: Props): boolean {
-  name: 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(
+function getListener(vNode: VNode, eventName: string): Function | null {
-  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,

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;
     }
   }

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);
+  return 'on' + name[0].toUpperCase() + name.slice(1);
-  const horizonEventName = 'on' + capitalizedEvent;
-  return horizonEventName;
 }