@whitesev/domutils 1.7.5 → 1.8.0

package/dist/index.system.js

@@ -526,13 +526,7 @@ System.register('DOMUtils', [], (function (exports) {
                 },
             };
 
-            const version = "1.7.5";
-
-            /* 数据 */
-            const GlobalData = {
-                /** .on添加在元素存储的事件 */
-                domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
-            };
+            const version = "1.8.0";
 
             class ElementSelector {
                 windowApi;
@@ -1625,6 +1619,12 @@ System.register('DOMUtils', [], (function (exports) {
             }
             new ElementAnimate();
 
+            /* 数据 */
+            const GlobalData = {
+                /** .on添加在元素存储的事件 */
+                domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+            };
+
             const OriginPrototype = {
                 Object: {
                     defineProperty: Object.defineProperty,
@@ -1684,7 +1684,7 @@ System.register('DOMUtils', [], (function (exports) {
                     if (element == null) {
                         return {
                             off() { },
-                            trigger() { },
+                            emit() { },
                         };
                     }
                     let $elList = [];
@@ -1819,10 +1819,10 @@ System.register('DOMUtils', [], (function (exports) {
                         /**
                          * 主动触发事件
                          * @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);
                         },
                     };
                 }
@@ -2001,7 +2001,7 @@ System.register('DOMUtils', [], (function (exports) {
                         });
                     });
                 }
-                ready(...args) {
+                onReady(...args) {
                     const callback = args[0];
                     // 异步回调
                     let resolve = void 0;
@@ -2095,16 +2095,16 @@ System.register('DOMUtils', [], (function (exports) {
                  * @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);
@@ -2146,7 +2146,7 @@ System.register('DOMUtils', [], (function (exports) {
                                     });
                                 }
                             }
-                            if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
+                            if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
                                 // 直接调用监听的事件
                                 elementEvents[eventTypeItem].forEach((eventsItem) => {
                                     eventsItem.callback(event);
@@ -2159,11 +2159,11 @@ System.register('DOMUtils', [], (function (exports) {
                     });
                 }
                 /**
-                 * 绑定或触发元素的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"))
@@ -2172,7 +2172,7 @@ System.register('DOMUtils', [], (function (exports) {
                  *  console.log("触发click事件成功")
                  * })
                  * */
-                click(element, handler, details, useDispatchToTriggerEvent) {
+                click(element, handler, details, useDispatchToEmit) {
                     const that = this;
                     if (typeof element === "string") {
                         element = that.selectorAll(element);
@@ -2183,23 +2183,23 @@ System.register('DOMUtils', [], (function (exports) {
                     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"))
@@ -2208,7 +2208,7 @@ System.register('DOMUtils', [], (function (exports) {
                  *  console.log("触发blur事件成功")
                  * })
                  * */
-                blur(element, handler, details, useDispatchToTriggerEvent) {
+                blur(element, handler, details, useDispatchToEmit) {
                     const that = this;
                     if (typeof element === "string") {
                         element = that.selectorAll(element);
@@ -2219,23 +2219,23 @@ System.register('DOMUtils', [], (function (exports) {
                     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"))
@@ -2244,7 +2244,7 @@ System.register('DOMUtils', [], (function (exports) {
                  *  console.log("触发focus事件成功")
                  * })
                  * */
-                focus(element, handler, details, useDispatchToTriggerEvent) {
+                focus(element, handler, details, useDispatchToEmit) {
                     const that = this;
                     if (typeof element === "string") {
                         element = that.selectorAll(element);
@@ -2255,12 +2255,12 @@ System.register('DOMUtils', [], (function (exports) {
                     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);
@@ -2273,14 +2273,14 @@ System.register('DOMUtils', [], (function (exports) {
                  * @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);
@@ -2291,7 +2291,7 @@ System.register('DOMUtils', [], (function (exports) {
                     if (CommonUtils.isNodeList(element)) {
                         // 设置
                         element.forEach(($ele) => {
-                            that.hover($ele, handler, option);
+                            that.onHover($ele, handler, option);
                         });
                         return;
                     }
@@ -2299,12 +2299,12 @@ System.register('DOMUtils', [], (function (exports) {
                     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);
@@ -2327,12 +2327,12 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                 }
                 /**
-                 * 当过渡结束时触发事件
+                 * 监听过渡结束
                  * @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);
@@ -2369,7 +2369,7 @@ System.register('DOMUtils', [], (function (exports) {
                  *   console.log("按键松开");
                  * })
                  */
-                keyup(element, handler, option) {
+                onKeyup(element, handler, option) {
                     const that = this;
                     if (element == null) {
                         return;
@@ -2380,7 +2380,7 @@ System.register('DOMUtils', [], (function (exports) {
                     if (CommonUtils.isNodeList(element)) {
                         // 设置
                         element.forEach(($ele) => {
-                            that.keyup($ele, handler, option);
+                            that.onKeyup($ele, handler, option);
                         });
                         return;
                     }
@@ -2401,7 +2401,7 @@ System.register('DOMUtils', [], (function (exports) {
                  *   console.log("按键按下");
                  * })
                  */
-                keydown(element, handler, option) {
+                onKeydown(element, handler, option) {
                     const that = this;
                     if (element == null) {
                         return;
@@ -2412,7 +2412,7 @@ System.register('DOMUtils', [], (function (exports) {
                     if (CommonUtils.isNodeList(element)) {
                         // 设置
                         element.forEach(($ele) => {
-                            that.keydown($ele, handler, option);
+                            that.onKeydown($ele, handler, option);
                         });
                         return;
                     }
@@ -2433,7 +2433,7 @@ System.register('DOMUtils', [], (function (exports) {
                  *   console.log("按键按下");
                  * })
                  */
-                keypress(element, handler, option) {
+                onKeypress(element, handler, option) {
                     const that = this;
                     if (element == null) {
                         return;
@@ -2444,76 +2444,76 @@ System.register('DOMUtils', [], (function (exports) {
                     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);
@@ -2537,8 +2537,8 @@ System.register('DOMUtils', [], (function (exports) {
                         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);
@@ -2548,6 +2548,113 @@ System.register('DOMUtils', [], (function (exports) {
                         },
                     };
                 }
+                /**
+                 * 监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) {
                     /**
                      * 阻止事件的默认行为发生，并阻止事件传播