@whitesev/domutils 1.7.4 → 1.8.0

package/dist/index.umd.js

@@ -527,13 +527,7 @@
         },
     };
 
-    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;
@@ -905,35 +899,41 @@
             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;
@@ -1620,6 +1620,12 @@
     }
     new ElementAnimate();
 
+    /* 数据 */
+    const GlobalData = {
+        /** .on添加在元素存储的事件 */
+        domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+    };
+
     const OriginPrototype = {
         Object: {
             defineProperty: Object.defineProperty,
@@ -1679,7 +1685,7 @@
             if (element == null) {
                 return {
                     off() { },
-                    trigger() { },
+                    emit() { },
                 };
             }
             let $elList = [];
@@ -1814,10 +1820,10 @@
                 /**
                  * 主动触发事件
                  * @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);
                 },
             };
         }
@@ -1996,7 +2002,7 @@
                 });
             });
         }
-        ready(...args) {
+        onReady(...args) {
             const callback = args[0];
             // 异步回调
             let resolve = void 0;
@@ -2090,16 +2096,16 @@
          * @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);
@@ -2141,7 +2147,7 @@
                             });
                         }
                     }
-                    if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
+                    if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
                         // 直接调用监听的事件
                         elementEvents[eventTypeItem].forEach((eventsItem) => {
                             eventsItem.callback(event);
@@ -2154,11 +2160,11 @@
             });
         }
         /**
-         * 绑定或触发元素的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"))
@@ -2167,7 +2173,7 @@
          *  console.log("触发click事件成功")
          * })
          * */
-        click(element, handler, details, useDispatchToTriggerEvent) {
+        click(element, handler, details, useDispatchToEmit) {
             const that = this;
             if (typeof element === "string") {
                 element = that.selectorAll(element);
@@ -2178,23 +2184,23 @@
             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"))
@@ -2203,7 +2209,7 @@
          *  console.log("触发blur事件成功")
          * })
          * */
-        blur(element, handler, details, useDispatchToTriggerEvent) {
+        blur(element, handler, details, useDispatchToEmit) {
             const that = this;
             if (typeof element === "string") {
                 element = that.selectorAll(element);
@@ -2214,23 +2220,23 @@
             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"))
@@ -2239,7 +2245,7 @@
          *  console.log("触发focus事件成功")
          * })
          * */
-        focus(element, handler, details, useDispatchToTriggerEvent) {
+        focus(element, handler, details, useDispatchToEmit) {
             const that = this;
             if (typeof element === "string") {
                 element = that.selectorAll(element);
@@ -2250,12 +2256,12 @@
             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);
@@ -2268,14 +2274,14 @@
          * @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);
@@ -2286,7 +2292,7 @@
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.hover($ele, handler, option);
+                    that.onHover($ele, handler, option);
                 });
                 return;
             }
@@ -2294,12 +2300,12 @@
             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);
@@ -2322,12 +2328,12 @@
             }
         }
         /**
-         * 当过渡结束时触发事件
+         * 监听过渡结束
          * @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);
@@ -2364,7 +2370,7 @@
          *   console.log("按键松开");
          * })
          */
-        keyup(element, handler, option) {
+        onKeyup(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2375,7 +2381,7 @@
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.keyup($ele, handler, option);
+                    that.onKeyup($ele, handler, option);
                 });
                 return;
             }
@@ -2396,7 +2402,7 @@
          *   console.log("按键按下");
          * })
          */
-        keydown(element, handler, option) {
+        onKeydown(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2407,7 +2413,7 @@
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.keydown($ele, handler, option);
+                    that.onKeydown($ele, handler, option);
                 });
                 return;
             }
@@ -2428,7 +2434,7 @@
          *   console.log("按键按下");
          * })
          */
-        keypress(element, handler, option) {
+        onKeypress(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2439,76 +2445,76 @@
             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);
@@ -2532,8 +2538,8 @@
                 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);
@@ -2543,6 +2549,113 @@
                 },
             };
         }
+        /**
+         * 监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) {
             /**
              * 阻止事件的默认行为发生，并阻止事件传播