@whitesev/domutils 1.7.5 → 1.8.0

package/README.md

@@ -28,10 +28,10 @@ nnpm add @whitesev/domutils
 - focus `绑定或触发元素的focus事件`
 - height `获取元素的高度`
 - hide `隐藏元素`
-- hover `当鼠标移入或移出元素时触发事件`
+- onHover `当鼠标移入或移出元素时触发事件`
 - html `获取或设置元素的HTML内容`
-- keydown `当按键按下时触发事件`
-- keyup `当按键松开时触发事件`
+- onKeydown `当按键按下时触发事件`
+- onKeyup `当按键松开时触发事件`
 - next `获取当前元素的后一个兄弟元素`
 - off `取消绑定事件`
 - offset `设置或返回被选元素相对于文档的偏移坐标`
@@ -50,7 +50,7 @@ nnpm add @whitesev/domutils
 - siblings `获取当前元素的所有兄弟元素`
 - text `获取或设置元素的文本内容`
 - toggle `切换元素的显示和隐藏状态`
-- trigger `主动触发事件`
+- emit `主动触发事件`
 - val `获取或设置元素的value属性值`
 - width `获取元素的宽度`
 - wrap `将一个元素包裹在指定的HTML元素中`

package/dist/index.amd.js

@@ -523,13 +523,7 @@ define((function () { 'use strict';
         },
     };
 
-    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;
@@ -1622,6 +1616,12 @@ define((function () { 'use strict';
     }
     new ElementAnimate();
 
+    /* 数据 */
+    const GlobalData = {
+        /** .on添加在元素存储的事件 */
+        domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+    };
+
     const OriginPrototype = {
         Object: {
             defineProperty: Object.defineProperty,
@@ -1681,7 +1681,7 @@ define((function () { 'use strict';
             if (element == null) {
                 return {
                     off() { },
-                    trigger() { },
+                    emit() { },
                 };
             }
             let $elList = [];
@@ -1816,10 +1816,10 @@ define((function () { 'use strict';
                 /**
                  * 主动触发事件
                  * @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);
                 },
             };
         }
@@ -1998,7 +1998,7 @@ define((function () { 'use strict';
                 });
             });
         }
-        ready(...args) {
+        onReady(...args) {
             const callback = args[0];
             // 异步回调
             let resolve = void 0;
@@ -2092,16 +2092,16 @@ define((function () { 'use strict';
          * @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);
@@ -2143,7 +2143,7 @@ define((function () { 'use strict';
                             });
                         }
                     }
-                    if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
+                    if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
                         // 直接调用监听的事件
                         elementEvents[eventTypeItem].forEach((eventsItem) => {
                             eventsItem.callback(event);
@@ -2156,11 +2156,11 @@ define((function () { 'use strict';
             });
         }
         /**
-         * 绑定或触发元素的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"))
@@ -2169,7 +2169,7 @@ define((function () { 'use strict';
          *  console.log("触发click事件成功")
          * })
          * */
-        click(element, handler, details, useDispatchToTriggerEvent) {
+        click(element, handler, details, useDispatchToEmit) {
             const that = this;
             if (typeof element === "string") {
                 element = that.selectorAll(element);
@@ -2180,23 +2180,23 @@ define((function () { 'use strict';
             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"))
@@ -2205,7 +2205,7 @@ define((function () { 'use strict';
          *  console.log("触发blur事件成功")
          * })
          * */
-        blur(element, handler, details, useDispatchToTriggerEvent) {
+        blur(element, handler, details, useDispatchToEmit) {
             const that = this;
             if (typeof element === "string") {
                 element = that.selectorAll(element);
@@ -2216,23 +2216,23 @@ define((function () { 'use strict';
             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"))
@@ -2241,7 +2241,7 @@ define((function () { 'use strict';
          *  console.log("触发focus事件成功")
          * })
          * */
-        focus(element, handler, details, useDispatchToTriggerEvent) {
+        focus(element, handler, details, useDispatchToEmit) {
             const that = this;
             if (typeof element === "string") {
                 element = that.selectorAll(element);
@@ -2252,12 +2252,12 @@ define((function () { 'use strict';
             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);
@@ -2270,14 +2270,14 @@ define((function () { 'use strict';
          * @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);
@@ -2288,7 +2288,7 @@ define((function () { 'use strict';
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.hover($ele, handler, option);
+                    that.onHover($ele, handler, option);
                 });
                 return;
             }
@@ -2296,12 +2296,12 @@ define((function () { 'use strict';
             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);
@@ -2324,12 +2324,12 @@ define((function () { 'use strict';
             }
         }
         /**
-         * 当过渡结束时触发事件
+         * 监听过渡结束
          * @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);
@@ -2366,7 +2366,7 @@ define((function () { 'use strict';
          *   console.log("按键松开");
          * })
          */
-        keyup(element, handler, option) {
+        onKeyup(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2377,7 +2377,7 @@ define((function () { 'use strict';
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.keyup($ele, handler, option);
+                    that.onKeyup($ele, handler, option);
                 });
                 return;
             }
@@ -2398,7 +2398,7 @@ define((function () { 'use strict';
          *   console.log("按键按下");
          * })
          */
-        keydown(element, handler, option) {
+        onKeydown(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2409,7 +2409,7 @@ define((function () { 'use strict';
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.keydown($ele, handler, option);
+                    that.onKeydown($ele, handler, option);
                 });
                 return;
             }
@@ -2430,7 +2430,7 @@ define((function () { 'use strict';
          *   console.log("按键按下");
          * })
          */
-        keypress(element, handler, option) {
+        onKeypress(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2441,76 +2441,76 @@ define((function () { 'use strict';
             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);
@@ -2534,8 +2534,8 @@ define((function () { 'use strict';
                 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);
@@ -2545,6 +2545,113 @@ define((function () { 'use strict';
                 },
             };
         }
+        /**
+         * 监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) {
             /**
              * 阻止事件的默认行为发生，并阻止事件传播