@whitesev/domutils 1.7.4 → 1.8.0

package/dist/index.esm.js

@@ -521,13 +521,7 @@ const CommonUtils = {
     },
 };
 
-const version = "1.7.4";
-
-/* 数据 */
-const GlobalData = {
-    /** .on添加在元素存储的事件 */
-    domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
-};
+const version = "1.8.0";
 
 class ElementSelector {
     windowApi;
@@ -899,35 +893,41 @@ class Utils {
         if (target == null) {
             target = {};
         }
+        // 当前遍历的目标对象
+        let iteratorTarget;
         if (isAdd) {
-            for (const sourceKeyName in source) {
-                const targetKeyName = sourceKeyName;
-                const targetValue = Reflect.get(target, targetKeyName);
-                const sourceValue = Reflect.get(source, sourceKeyName);
-                if (typeof sourceValue === "object" && sourceValue != null && sourceKeyName in target && !isDOM(sourceValue)) {
-                    /* 源端的值是object类型，且不是元素节点 */
-                    Reflect.set(target, sourceKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
-                    continue;
-                }
-                Reflect.set(target, sourceKeyName, sourceValue);
-            }
+            // 追加并覆盖是以source为准
+            iteratorTarget = source;
         }
         else {
-            for (const targetKeyName in target) {
-                if (targetKeyName in source) {
-                    const targetValue = Reflect.get(target, targetKeyName);
-                    const sourceValue = Reflect.get(source, targetKeyName);
-                    if (typeof sourceValue === "object" &&
-                        sourceValue != null &&
-                        !isDOM(sourceValue) &&
-                        Object.keys(sourceValue).length) {
-                        /* 源端的值是object类型，且不是元素节点 */
-                        Reflect.set(target, targetKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
-                        continue;
+            // 覆盖以target为准
+            iteratorTarget = target;
+        }
+        for (const keyName in iteratorTarget) {
+            if (!isAdd && !(keyName in source)) {
+                // 仅替换 但是源端没有此键
+                continue;
+            }
+            const targetValue = Reflect.get(target, keyName);
+            const sourceValue = Reflect.get(source, keyName);
+            if (typeof sourceValue === "object" && sourceValue != null && keyName in target && !isDOM(sourceValue)) {
+                // 源端的值是object类型，且不是元素节点
+                // 如果是数组，那此数组中有值，清空旧的数组再赋值
+                let childObjectValue;
+                if (Array.isArray(sourceValue)) {
+                    if (Array.isArray(targetValue)) {
+                        targetValue.length = 0;
                     }
-                    /* 直接赋值 */
-                    Reflect.set(target, targetKeyName, sourceValue);
+                    childObjectValue = sourceValue;
+                }
+                else {
+                    childObjectValue = UtilsContext.assign(targetValue, sourceValue, isAdd);
                 }
+                Reflect.set(target, keyName, childObjectValue);
+            }
+            else {
+                /* 直接赋值 */
+                Reflect.set(target, keyName, sourceValue);
             }
         }
         return target;
@@ -1614,6 +1614,12 @@ class ElementAnimate extends ElementWait {
 }
 new ElementAnimate();
 
+/* 数据 */
+const GlobalData = {
+    /** .on添加在元素存储的事件 */
+    domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+};
+
 const OriginPrototype = {
     Object: {
         defineProperty: Object.defineProperty,
@@ -1673,7 +1679,7 @@ class ElementEvent extends ElementAnimate {
         if (element == null) {
             return {
                 off() { },
-                trigger() { },
+                emit() { },
             };
         }
         let $elList = [];
@@ -1808,10 +1814,10 @@ class ElementEvent extends ElementAnimate {
             /**
              * 主动触发事件
              * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-             * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+             * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
              */
-            trigger: (details, useDispatchToTriggerEvent) => {
-                that.trigger($elList, eventTypeList, details, useDispatchToTriggerEvent);
+            emit: (details, useDispatchToEmit) => {
+                that.emit($elList, eventTypeList, details, useDispatchToEmit);
             },
         };
     }
@@ -1990,7 +1996,7 @@ class ElementEvent extends ElementAnimate {
             });
         });
     }
-    ready(...args) {
+    onReady(...args) {
         const callback = args[0];
         // 异步回调
         let resolve = void 0;
@@ -2084,16 +2090,16 @@ class ElementEvent extends ElementAnimate {
      * @param element 需要触发的元素|元素数组|window
      * @param eventType 需要触发的事件
      * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+     * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
      * @example
      * // 触发元素a.xx的click事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click")
-     * DOMUtils.trigger("a.xx","click")
+     * DOMUtils.emit(document.querySelector("a.xx"),"click")
+     * DOMUtils.emit("a.xx","click")
      * // 触发元素a.xx的click、tap、hover事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
-     * DOMUtils.trigger("a.xx",["click","tap","hover"])
+     * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
+     * DOMUtils.emit("a.xx",["click","tap","hover"])
      */
-    trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
+    emit(element, eventType, details, useDispatchToEmit = true) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2135,7 +2141,7 @@ class ElementEvent extends ElementAnimate {
                         });
                     }
                 }
-                if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
+                if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
                     // 直接调用监听的事件
                     elementEvents[eventTypeItem].forEach((eventsItem) => {
                         eventsItem.callback(event);
@@ -2148,11 +2154,11 @@ class ElementEvent extends ElementAnimate {
         });
     }
     /**
-     * 绑定或触发元素的click事件
+     * 监听或触发元素的click事件
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmit （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的click事件
      * DOMUtils.click(document.querySelector("a.xx"))
@@ -2161,7 +2167,7 @@ class ElementEvent extends ElementAnimate {
      *  console.log("触发click事件成功")
      * })
      * */
-    click(element, handler, details, useDispatchToTriggerEvent) {
+    click(element, handler, details, useDispatchToEmit) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2172,23 +2178,23 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.click($ele, handler, details, useDispatchToTriggerEvent);
+                that.click($ele, handler, details, useDispatchToEmit);
             });
             return;
         }
         if (handler == null) {
-            that.trigger(element, "click", details, useDispatchToTriggerEvent);
+            that.emit(element, "click", details, useDispatchToEmit);
         }
         else {
             that.on(element, "click", null, handler);
         }
     }
     /**
-     * 绑定或触发元素的blur事件
+     * 监听或触发元素的blur事件
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmit （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的blur事件
      * DOMUtils.blur(document.querySelector("a.xx"))
@@ -2197,7 +2203,7 @@ class ElementEvent extends ElementAnimate {
      *  console.log("触发blur事件成功")
      * })
      * */
-    blur(element, handler, details, useDispatchToTriggerEvent) {
+    blur(element, handler, details, useDispatchToEmit) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2208,23 +2214,23 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.focus($ele, handler, details, useDispatchToTriggerEvent);
+                that.focus($ele, handler, details, useDispatchToEmit);
             });
             return;
         }
         if (handler === null) {
-            that.trigger(element, "blur", details, useDispatchToTriggerEvent);
+            that.emit(element, "blur", details, useDispatchToEmit);
         }
         else {
             that.on(element, "blur", null, handler);
         }
     }
     /**
-     * 绑定或触发元素的focus事件
+     * 监听或触发元素的focus事件
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmit （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的focus事件
      * DOMUtils.focus(document.querySelector("a.xx"))
@@ -2233,7 +2239,7 @@ class ElementEvent extends ElementAnimate {
      *  console.log("触发focus事件成功")
      * })
      * */
-    focus(element, handler, details, useDispatchToTriggerEvent) {
+    focus(element, handler, details, useDispatchToEmit) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2244,12 +2250,12 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.focus($ele, handler, details, useDispatchToTriggerEvent);
+                that.focus($ele, handler, details, useDispatchToEmit);
             });
             return;
         }
         if (handler == null) {
-            that.trigger(element, "focus", details, useDispatchToTriggerEvent);
+            that.emit(element, "focus", details, useDispatchToEmit);
         }
         else {
             that.on(element, "focus", null, handler);
@@ -2262,14 +2268,14 @@ class ElementEvent extends ElementAnimate {
      * @param option 配置
      * @example
      * // 监听a.xx元素的移入或移出
-     * DOMUtils.hover(document.querySelector("a.xx"),()=>{
+     * DOMUtils.onHover(document.querySelector("a.xx"),()=>{
      *   console.log("移入/移除");
      * })
-     * DOMUtils.hover("a.xx",()=>{
+     * DOMUtils.onHover("a.xx",()=>{
      *   console.log("移入/移除");
      * })
      */
-    hover(element, handler, option) {
+    onHover(element, handler, option) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2280,7 +2286,7 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.hover($ele, handler, option);
+                that.onHover($ele, handler, option);
             });
             return;
         }
@@ -2288,12 +2294,12 @@ class ElementEvent extends ElementAnimate {
         that.on(element, "mouseleave", null, handler, option);
     }
     /**
-     * 当动画结束时触发事件
+     * 监听动画结束
      * @param element 监听的元素
      * @param handler 触发的回调函数
      * @param option 配置项，这里默认配置once为true
      */
-    animationend(element, handler, option) {
+    onAnimationend(element, handler, option) {
         const that = this;
         if (typeof element === "string") {
             element = that.selector(element);
@@ -2316,12 +2322,12 @@ class ElementEvent extends ElementAnimate {
         }
     }
     /**
-     * 当过渡结束时触发事件
+     * 监听过渡结束
      * @param element 监听的元素
      * @param handler 触发的回调函数
      * @param option 配置项，这里默认配置once为true
      */
-    transitionend(element, handler, option) {
+    onTransitionend(element, handler, option) {
         const that = this;
         if (typeof element === "string") {
             element = that.selector(element);
@@ -2358,7 +2364,7 @@ class ElementEvent extends ElementAnimate {
      *   console.log("按键松开");
      * })
      */
-    keyup(element, handler, option) {
+    onKeyup(element, handler, option) {
         const that = this;
         if (element == null) {
             return;
@@ -2369,7 +2375,7 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.keyup($ele, handler, option);
+                that.onKeyup($ele, handler, option);
             });
             return;
         }
@@ -2390,7 +2396,7 @@ class ElementEvent extends ElementAnimate {
      *   console.log("按键按下");
      * })
      */
-    keydown(element, handler, option) {
+    onKeydown(element, handler, option) {
         const that = this;
         if (element == null) {
             return;
@@ -2401,7 +2407,7 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.keydown($ele, handler, option);
+                that.onKeydown($ele, handler, option);
             });
             return;
         }
@@ -2422,7 +2428,7 @@ class ElementEvent extends ElementAnimate {
      *   console.log("按键按下");
      * })
      */
-    keypress(element, handler, option) {
+    onKeypress(element, handler, option) {
         const that = this;
         if (element == null) {
             return;
@@ -2433,76 +2439,76 @@ class ElementEvent extends ElementAnimate {
         if (CommonUtils.isNodeList(element)) {
             // 设置
             element.forEach(($ele) => {
-                that.keypress($ele, handler, option);
+                that.onKeypress($ele, handler, option);
             });
             return;
         }
         that.on(element, "keypress", null, handler, option);
     }
     /**
-       * 监听某个元素键盘按键事件或window全局按键事件
-       * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
-       * @param element 需要监听的对象，可以是全局Window或者某个元素
-       * @param eventName 事件名，默认keypress
-       * @param callback 自己定义的回调事件，参数1为当前的key，参数2为组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
+     * 监听某个元素键盘按键事件或window全局按键事件
+     * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
+     * @param element 需要监听的对象，可以是全局Window或者某个元素
+     * @param eventName 事件名，默认keypress，keydown - > keypress - > keyup
+     * @param handler 自己定义的回调事件，参数1为当前的key，参数2为组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
        * @param options 监听事件的配置
-       * @example
-          Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
-              if(keyName === "Enter"){
-                  console.log("回车按键的值是："+keyValue)
-              }
-              if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
-                  console.log("Ctrl和回车键");
-            }
-          })
-       * @example
-      字母和数字键的键码值(keyCode)
-        按键	键码	按键	键码	按键	键码	按键	键码
-        A	65	J	74	S	83	1	49
-        B	66	K	75	T	84	2	50
-        C	67	L	76	U	85	3	51
-        D	68	M	77	V	86	4	52
-        E	69	N	78	W	87	5	53
-        F	70	O	79	X	88	6	54
-        G	71	P	80	Y	89	7	55
-        H	72	Q	81	Z	90	8	56
-        I	73	R	82	0	48	9	57
-    
-        数字键盘上的键的键码值(keyCode)
-        功能键键码值(keyCode)
-        按键	键码	按键  	键码	按键	键码	按键	键码
-        0	96	8	104	F1	112	F7	118
-        1	97	9	105	F2	113	F8	119
-        2	98	*	106	F3	114	F9	120
-        3	99	+	107	F4	115	F10	121
-        4	100	Enter	108	F5	116	F11	122
-        5	101	-	109	F6	117	F12	123
-        6	102	.	110
-        7	103	/	111
-        
-        控制键键码值(keyCode)
-        按键		键码	按键		键码	按键		键码	按键		键码
-        BackSpace	8	Esc		27	→		39	-_		189
-        Tab		9	Spacebar	32	↓		40	.>		190
-        Clear		12	Page Up		33	Insert		45	/?		191
-        Enter		13	Page Down	34	Delete		46	`~		192
-        Shift		16	End		35	Num Lock	144	[{		219
-        Control		17	Home		36	;:		186	\|		220
-        Alt		18	←		37	=+		187	]}		221
-        Cape Lock	20	↑		38	,<		188	'"		222
-    
-        多媒体键码值(keyCode)
-        按键		键码
-        音量加		175
-        音量减		174
-        停止		179
-        静音		173
-        浏览器		172
-        邮件		180
-        搜索		170
-        收藏		171
-       **/
-    listenKeyboard(element, eventName = "keypress", callback, options) {
+     * @example
+       Utils.onKeyboard(window,(keyName,keyValue,otherKey,event)=>{
+           if(keyName === "Enter"){
+               console.log("回车按键的值是："+keyValue)
+           }
+           if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
+               console.log("Ctrl和回车键");
+         }
+       })
+     * @example
+       字母和数字键的键码值(keyCode)
+         按键	键码	按键	键码	按键	键码	按键	键码
+         A	65	J	74	S	83	1	49
+         B	66	K	75	T	84	2	50
+         C	67	L	76	U	85	3	51
+         D	68	M	77	V	86	4	52
+         E	69	N	78	W	87	5	53
+         F	70	O	79	X	88	6	54
+         G	71	P	80	Y	89	7	55
+         H	72	Q	81	Z	90	8	56
+         I	73	R	82	0	48	9	57
+     
+         数字键盘上的键的键码值(keyCode)
+         功能键键码值(keyCode)
+         按键	键码	按键  	键码	按键	键码	按键	键码
+         0	96	8	104	F1	112	F7	118
+         1	97	9	105	F2	113	F8	119
+         2	98	*	106	F3	114	F9	120
+         3	99	+	107	F4	115	F10	121
+         4	100	Enter	108	F5	116	F11	122
+         5	101	-	109	F6	117	F12	123
+         6	102	.	110
+         7	103	/	111
+         
+         控制键键码值(keyCode)
+         按键		键码	按键		键码	按键		键码	按键		键码
+         BackSpace	8	Esc		27	→		39	-_		189
+         Tab		9	Spacebar	32	↓		40	.>		190
+         Clear		12	Page Up		33	Insert		45	/?		191
+         Enter		13	Page Down	34	Delete		46	`~		192
+         Shift		16	End		35	Num Lock	144	[{		219
+         Control		17	Home		36	;:		186	\|		220
+         Alt		18	←		37	=+		187	]}		221
+         Cape Lock	20	↑		38	,<		188	'"		222
+     
+         多媒体键码值(keyCode)
+         按键		键码
+         音量加		175
+         音量减		174
+         停止		179
+         静音		173
+         浏览器		172
+         邮件		180
+         搜索		170
+         收藏		171
+      **/
+    onKeyboard(element, eventName = "keypress", handler, options) {
         const that = this;
         if (typeof element === "string") {
             element = that.selectorAll(element);
@@ -2526,8 +2532,8 @@ class ElementEvent extends ElementAnimate {
             if (event.shiftKey) {
                 otherCodeList.push("shift");
             }
-            if (typeof callback === "function") {
-                callback(keyName, keyValue, otherCodeList, event);
+            if (typeof handler === "function") {
+                handler(keyName, keyValue, otherCodeList, event);
             }
         };
         that.on(element, eventName, keyboardEventCallBack, options);
@@ -2537,6 +2543,113 @@ class ElementEvent extends ElementAnimate {
             },
         };
     }
+    /**
+     * 监input、textarea的输入框值改变的事件（当输入法输入时，不会触发该监听）
+     * @param $el 输入框元素
+     * @param handler 回调函数
+     * @param option 配置
+     */
+    onInput($el, handler, option) {
+        /**
+         * 是否正在输入中
+         */
+        let isComposite = false;
+        const __callback = async (event) => {
+            if (isComposite)
+                return;
+            await handler(event);
+        };
+        const __composition_start_callback = () => {
+            isComposite = true;
+        };
+        const __composition_end_callback = () => {
+            isComposite = false;
+            this.emit($el, "input", {
+                isComposite,
+            });
+        };
+        const inputListener = this.on($el, "input", __callback, option);
+        const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
+        const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
+        return {
+            off: () => {
+                inputListener.off();
+                compositionStartListener.off();
+                compositionEndListener.off();
+            },
+        };
+    }
+    onDoubleClick(...args) {
+        const $el = args[0];
+        let selector = void 0;
+        let handler;
+        let options;
+        if (args.length === 2) {
+            if (typeof args[1] === "function") {
+                handler = args[1];
+            }
+            else {
+                throw new TypeError("handler is not a function");
+            }
+        }
+        else if (args.length === 3) {
+            if (typeof args[1] === "function") {
+                handler = args[1];
+                options = args[2];
+            }
+            else {
+                selector = args[1];
+                handler = args[2];
+            }
+        }
+        else if (args.length === 4) {
+            selector = args[1];
+            handler = args[2];
+            options = args[3];
+        }
+        else {
+            throw new Error("args length error");
+        }
+        let $click = null;
+        let isDoubleClick = false;
+        let timer = void 0;
+        /** 是否是移动端点击 */
+        let isMobileTouch = false;
+        const dblclick_handler = async (evt) => {
+            if (evt.type === "dblclick" && isMobileTouch) {
+                // 禁止在移动端触发dblclick事件
+                return;
+            }
+            await handler(evt);
+        };
+        const dblClickListener = this.on($el, "dblclick", dblclick_handler, options);
+        const touchEndListener = this.on($el, "touchend", selector, (evt, selectorTarget) => {
+            isMobileTouch = true;
+            CommonUtils.clearTimeout(timer);
+            timer = void 0;
+            if (isDoubleClick && $click === selectorTarget) {
+                isDoubleClick = false;
+                $click = null;
+                /* 判定为双击 */
+                dblclick_handler(evt);
+            }
+            else {
+                timer = CommonUtils.setTimeout(() => {
+                    isDoubleClick = false;
+                    // 判断为单击
+                }, 200);
+                isDoubleClick = true;
+                $click = selectorTarget;
+            }
+        }, options);
+        return {
+            off() {
+                $click = null;
+                dblClickListener.off();
+                touchEndListener.off();
+            },
+        };
+    }
     preventEvent(...args) {
         /**
          * 阻止事件的默认行为发生，并阻止事件传播