@whitesev/domutils 1.9.6 → 1.9.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "1.9.6",
+  "version": "1.9.9",
   "description": "适合在浏览器中操作DOM的常用工具类",
   "keywords": [
     "typescript",
@@ -33,20 +33,20 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-commonjs": "^29.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "browserslist": "^4.28.1",
-    "caniuse-lite": "^1.0.30001770",
+    "caniuse-lite": "^1.0.30001776",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-compat": "^6.0.2",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.5",
     "globals": "^16.5.0",
-    "oxfmt": "^0.32.0",
-    "oxlint": "1.46.0",
+    "oxfmt": "^0.36.0",
+    "oxlint": "1.51.0",
     "rollup": "^4.54.0",
     "rollup-plugin-clear": "^2.0.7",
     "tslib": "^2.8.1",

package/src/ElementEvent.ts

@@ -533,15 +533,6 @@ class ElementEvent extends ElementAnimate {
       // 这是存在selector的情况
       listenerOption = getOption(args, 4, listenerOption);
     }
-    // 是否移除所有事件
-    let isRemoveAll = false;
-    if (args.length === 2) {
-      // 目标函数、事件名
-      isRemoveAll = true;
-    } else if ((args.length === 3 && typeof args[2] === "string") || Array.isArray(args[2])) {
-      // 目标函数、事件名、子元素选择器
-      isRemoveAll = true;
-    }
     if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
       // 目标函数、事件名、回调函数、事件配置、过滤函数
       filter = option as (
@@ -579,7 +570,7 @@ class ElementEvent extends ElementAnimate {
             // 事件的配置项不同
             flag = false;
           }
-          if (flag || isRemoveAll) {
+          if (flag) {
             $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
             const findIndex = handlers.findIndex((item) => item === handler);
             if (findIndex !== -1) {
@@ -830,20 +821,23 @@ class ElementEvent extends ElementAnimate {
   /**
    * 主动触发事件
    * @param element 需要触发的元素|元素数组|window
-   * @param eventType 需要触发的事件
-   * @param extraDetails 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-   * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用通过.on监听的callback()，但是这种只有一个入参，如果使用$selector则没有值
+   * @param event 触发的事件
+   * @param extraDetails （可选）赋予触发的Event的额外属性
+   * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用通过.on监听的callback()，但是这种只有一个入参，如果使用$selector则没有值
    * @example
-   * // 触发元素a.xx的click事件
-   * DOMUtils.emit(document.querySelector("a.xx"),"click")
-   * DOMUtils.emit("a.xx","click")
-   * // 触发元素a.xx的click、tap、hover事件
-   * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
-   * DOMUtils.emit("a.xx",["click","tap","hover"])
+   * DOMUtils.emit("a.xx", new Event("click"))
+   * @example
+   * DOMUtils.emit("a.xx", new Event("click"), {
+   *   disableHook: true
+   * })
+   * @example
+   * DOMUtils.emit("a.xx", new Event("click"), {
+   *   disableHook: true
+   * },false)
    */
   emit(
     element: Element | string | NodeList | any[] | Window | Document,
-    eventType: DOMUtils_EventType | DOMUtils_EventType[],
+    event: Event,
     extraDetails?: object,
     useDispatchToTriggerEvent?: boolean
   ): void;
@@ -863,7 +857,7 @@ class ElementEvent extends ElementAnimate {
    */
   emit(
     element: Element | string | NodeList | any[] | Window | Document,
-    eventType: DOMUtils_EventType | DOMUtils_EventType[] | string | string[],
+    eventType: DOMUtils_EventType | DOMUtils_EventType[] | string | string[] | Event,
     extraDetails?: object | boolean,
     useDispatchToTriggerEvent: boolean = true
   ) {
@@ -880,11 +874,33 @@ class ElementEvent extends ElementAnimate {
     } else {
       $elList.push(element);
     }
+
+    /**
+     * 主动添加属性
+     */
+    const addExtraProp = (event: Event, obj: any) => {
+      if (event instanceof Event && typeof obj === "object" && obj != null && !Array.isArray(obj)) {
+        const detailKeys = Object.keys(obj);
+        detailKeys.forEach((keyName) => {
+          const value = Reflect.get(obj, keyName);
+          // 在event上添加属性
+          Reflect.set(event, keyName, value);
+        });
+      }
+    };
+
     let eventTypeList: string[] = [];
+    /**
+     * 主动传递的事件
+     */
+    let __event__: Event | null = null;
     if (Array.isArray(eventType)) {
       eventTypeList = eventType.filter((it) => typeof it === "string" && it.trim() !== "");
     } else if (typeof eventType === "string") {
       eventTypeList = eventType.split(" ");
+    } else if (eventType instanceof Event) {
+      __event__ = eventType;
+      addExtraProp(__event__, extraDetails);
     }
 
     $elList.forEach(($elItem) => {
@@ -892,31 +908,34 @@ class ElementEvent extends ElementAnimate {
       const elementEvents: {
         [key: string]: DOMUtilsEventListenerOptionsAttribute[];
       } = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
-      eventTypeList.forEach((eventTypeItem) => {
-        let event: Event = null as any;
-        if (extraDetails && extraDetails instanceof Event) {
-          event = extraDetails;
-        } else {
-          // 构造事件
-          event = new Event(eventTypeItem);
-          if (typeof extraDetails === "object" && extraDetails != null) {
-            const detailKeys = Object.keys(extraDetails);
-            detailKeys.forEach((keyName) => {
-              const value = Reflect.get(extraDetails, keyName);
-              // 在event上添加属性
-              Reflect.set(event, keyName, value);
-            });
-          }
-        }
+
+      /**
+       * 触发事件
+       */
+      const dispatchEvent = (event: Event, eventTypeItem: string) => {
         if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
-          // 直接调用监听的事件
+          // 直接调用.on监听的事件
           elementEvents[eventTypeItem].forEach((eventsItem) => {
             eventsItem.handlerCallBack(event);
           });
         } else {
           $elItem.dispatchEvent(event);
         }
-      });
+      };
+
+      if (__event__) {
+        // 使用主动传递的事件直接触发
+        const event = __event__;
+        const eventTypeItem = event.type;
+        dispatchEvent(event, eventTypeItem);
+      } else {
+        eventTypeList.forEach((eventTypeItem) => {
+          // 构造事件
+          const event = new Event(eventTypeItem);
+          addExtraProp(event, extraDetails);
+          dispatchEvent(event, eventTypeItem);
+        });
+      }
     });
   }
 
@@ -1255,53 +1274,6 @@ class ElementEvent extends ElementAnimate {
     }
     return that.on(element, "keydown", null, handler, option);
   }
-  /**
-   * 当按键按下时触发事件
-   * keydown - > keypress - > keyup
-   * @param element 目标
-   * @param handler 事件处理函数
-   * @param option 配置
-   * @example
-   * // 监听a.xx元素的按键按下
-   * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
-   *   console.log("按键按下");
-   * })
-   * DOMUtils.keypress("a.xx",()=>{
-   *   console.log("按键按下");
-   * })
-   */
-  onKeypress(
-    element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis,
-    handler: (this: HTMLElement, event: DOMUtils_Event["keypress"]) => void,
-    option?: boolean | DOMUtilsEventListenerOption
-  ) {
-    const that = this;
-    if (element == null) {
-      return;
-    }
-    if (typeof element === "string") {
-      element = that.selectorAll(element);
-    }
-    if (CommonUtils.isNodeList(element)) {
-      // 设置
-      const listenerList: (DOMUtilsAddEventListenerResult | undefined)[] = [];
-      element.forEach(($ele) => {
-        const listener = that.onKeypress($ele as HTMLElement, handler, option);
-        listenerList.push(listener);
-      });
-      return {
-        off() {
-          listenerList.forEach((listener) => {
-            if (!listener) {
-              return;
-            }
-            listener.off();
-          });
-        },
-      } as DOMUtilsAddEventListenerResult;
-    }
-    return that.on(element, "keypress", null, handler, option);
-  }
   /**
    * 监听某个元素键盘按键事件或window全局按键事件
    * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
@@ -1367,7 +1339,7 @@ class ElementEvent extends ElementAnimate {
     **/
   onKeyboard(
     element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis,
-    eventName: "keydown" | "keypress" | "keyup" = "keypress",
+    eventName: "keydown" | "keyup" = "keydown",
     handler: (keyName: string, keyValue: number, otherCodeList: string[], event: KeyboardEvent) => void,
     options?: DOMUtilsEventListenerOption | boolean
   ): DOMUtilsAddEventListenerResult {
@@ -1687,7 +1659,9 @@ class ElementEvent extends ElementAnimate {
             onlyStopPropagation?: boolean;
           }
         | undefined = void 0;
-      if (typeof args[2] === "string" || Array.isArray(args[2])) {
+      if (args.length === 2) {
+        // ignore
+      } else if (typeof args[2] === "string" || Array.isArray(args[2])) {
         // selector
         selector = args[2];
         if (typeof args[3] === "object" && args[3] != null) {

package/src/Utils.ts

@@ -103,7 +103,6 @@ class Utils {
         "is",
         "jquery",
         "keydown",
-        "keypress",
         "keyup",
         "last",
         "load",

package/src/types/DOMUtilsEvent.d.ts

@@ -47,7 +47,12 @@ export type DOMUtils_MouseEventType = keyof DOMUtils_MouseEvent;
 export interface DOMUtils_KeyboardEvent {
   /** 键盘按下事件 */
   keydown: KeyboardEvent;
-  /** 键盘按压事件(字符键) */
+  /**
+   * 键盘按压事件(字符键)
+   *
+   * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event
+   * @deprecated
+   */
   keypress: KeyboardEvent;
   /** 键盘释放事件 */
   keyup: KeyboardEvent;