@whitesev/domutils 1.7.5 → 1.8.1

package/dist/index.umd.js

@@ -119,47 +119,7 @@
     const cache = createCache(LAST_NUMBER_WEAK_MAP);
     const generateUniqueNumber = createGenerateUniqueNumber(cache, LAST_NUMBER_WEAK_MAP);
 
-    const isMessagePort = (sender) => {
-        return typeof sender.start === 'function';
-    };
-
-    const PORT_MAP = new WeakMap();
-
-    const extendBrokerImplementation = (partialBrokerImplementation) => ({
-        ...partialBrokerImplementation,
-        connect: ({ call }) => {
-            return async () => {
-                const { port1, port2 } = new MessageChannel();
-                const portId = await call('connect', { port: port1 }, [port1]);
-                PORT_MAP.set(port2, portId);
-                return port2;
-            };
-        },
-        disconnect: ({ call }) => {
-            return async (port) => {
-                const portId = PORT_MAP.get(port);
-                if (portId === undefined) {
-                    throw new Error('The given port is not connected.');
-                }
-                await call('disconnect', { portId });
-            };
-        },
-        isSupported: ({ call }) => {
-            return () => call('isSupported');
-        }
-    });
-
-    const ONGOING_REQUESTS = new WeakMap();
-    const createOrGetOngoingRequests = (sender) => {
-        if (ONGOING_REQUESTS.has(sender)) {
-            // @todo TypeScript needs to be convinced that has() works as expected.
-            return ONGOING_REQUESTS.get(sender);
-        }
-        const ongoingRequests = new Map();
-        ONGOING_REQUESTS.set(sender, ongoingRequests);
-        return ongoingRequests;
-    };
-    const createBroker = (brokerImplementation) => {
+    const createBrokerFactory = (createOrGetOngoingRequests, extendBrokerImplementation, generateUniqueNumber, isMessagePort) => (brokerImplementation) => {
         const fullBrokerImplementation = extendBrokerImplementation(brokerImplementation);
         return (sender) => {
             const ongoingRequests = createOrGetOngoingRequests(sender);
@@ -202,81 +162,115 @@
         };
     };
 
-    // Prefilling the Maps with a function indexed by zero is necessary to be compliant with the specification.
-    const scheduledIntervalsState = new Map([[0, null]]); // tslint:disable-line no-empty
-    const scheduledTimeoutsState = new Map([[0, null]]); // tslint:disable-line no-empty
-    const wrap = createBroker({
-        clearInterval: ({ call }) => {
-            return (timerId) => {
-                if (typeof scheduledIntervalsState.get(timerId) === 'symbol') {
-                    scheduledIntervalsState.set(timerId, null);
-                    call('clear', { timerId, timerType: 'interval' }).then(() => {
-                        scheduledIntervalsState.delete(timerId);
-                    });
-                }
+    const createCreateOrGetOngoingRequests = (ongoingRequestsMap) => (sender) => {
+        if (ongoingRequestsMap.has(sender)) {
+            // @todo TypeScript needs to be convinced that has() works as expected.
+            return ongoingRequestsMap.get(sender);
+        }
+        const ongoingRequests = new Map();
+        ongoingRequestsMap.set(sender, ongoingRequests);
+        return ongoingRequests;
+    };
+
+    const createExtendBrokerImplementation = (portMap) => (partialBrokerImplementation) => ({
+        ...partialBrokerImplementation,
+        connect: ({ call }) => {
+            return async () => {
+                const { port1, port2 } = new MessageChannel();
+                const portId = await call('connect', { port: port1 }, [port1]);
+                portMap.set(port2, portId);
+                return port2;
             };
         },
-        clearTimeout: ({ call }) => {
-            return (timerId) => {
-                if (typeof scheduledTimeoutsState.get(timerId) === 'symbol') {
-                    scheduledTimeoutsState.set(timerId, null);
-                    call('clear', { timerId, timerType: 'timeout' }).then(() => {
-                        scheduledTimeoutsState.delete(timerId);
-                    });
+        disconnect: ({ call }) => {
+            return async (port) => {
+                const portId = portMap.get(port);
+                if (portId === undefined) {
+                    throw new Error('The given port is not connected.');
                 }
+                await call('disconnect', { portId });
             };
         },
-        setInterval: ({ call }) => {
-            return (func, delay = 0, ...args) => {
-                const symbol = Symbol();
-                const timerId = generateUniqueNumber(scheduledIntervalsState);
-                scheduledIntervalsState.set(timerId, symbol);
-                const schedule = () => call('set', {
-                    delay,
-                    now: performance.timeOrigin + performance.now(),
-                    timerId,
-                    timerType: 'interval'
-                }).then(() => {
-                    const state = scheduledIntervalsState.get(timerId);
-                    if (state === undefined) {
-                        throw new Error('The timer is in an undefined state.');
-                    }
-                    if (state === symbol) {
-                        func(...args);
-                        // Doublecheck if the interval should still be rescheduled because it could have been cleared inside of func().
-                        if (scheduledIntervalsState.get(timerId) === symbol) {
-                            schedule();
-                        }
-                    }
-                });
-                schedule();
-                return timerId;
-            };
-        },
-        setTimeout: ({ call }) => {
-            return (func, delay = 0, ...args) => {
-                const symbol = Symbol();
-                const timerId = generateUniqueNumber(scheduledTimeoutsState);
-                scheduledTimeoutsState.set(timerId, symbol);
-                call('set', {
-                    delay,
-                    now: performance.timeOrigin + performance.now(),
-                    timerId,
-                    timerType: 'timeout'
-                }).then(() => {
-                    const state = scheduledTimeoutsState.get(timerId);
-                    if (state === undefined) {
-                        throw new Error('The timer is in an undefined state.');
-                    }
-                    if (state === symbol) {
-                        // A timeout can be savely deleted because it is only called once.
-                        scheduledTimeoutsState.delete(timerId);
-                        func(...args);
-                    }
-                });
-                return timerId;
-            };
+        isSupported: ({ call }) => {
+            return () => call('isSupported');
+        }
+    });
+
+    const isMessagePort = (sender) => {
+        return typeof sender.start === 'function';
+    };
+
+    const createBroker = createBrokerFactory(createCreateOrGetOngoingRequests(new WeakMap()), createExtendBrokerImplementation(new WeakMap()), generateUniqueNumber, isMessagePort);
+
+    const createClearIntervalFactory = (scheduledIntervalsState) => (clear) => (timerId) => {
+        if (typeof scheduledIntervalsState.get(timerId) === 'symbol') {
+            scheduledIntervalsState.set(timerId, null);
+            clear(timerId).then(() => {
+                scheduledIntervalsState.delete(timerId);
+            });
         }
+    };
+
+    const createClearTimeoutFactory = (scheduledTimeoutsState) => (clear) => (timerId) => {
+        if (typeof scheduledTimeoutsState.get(timerId) === 'symbol') {
+            scheduledTimeoutsState.set(timerId, null);
+            clear(timerId).then(() => {
+                scheduledTimeoutsState.delete(timerId);
+            });
+        }
+    };
+
+    const createSetIntervalFactory = (generateUniqueNumber, scheduledIntervalsState) => (set) => (func, delay = 0, ...args) => {
+        const symbol = Symbol();
+        const timerId = generateUniqueNumber(scheduledIntervalsState);
+        scheduledIntervalsState.set(timerId, symbol);
+        const schedule = () => set(delay, timerId).then(() => {
+            const state = scheduledIntervalsState.get(timerId);
+            if (state === undefined) {
+                throw new Error('The timer is in an undefined state.');
+            }
+            if (state === symbol) {
+                func(...args);
+                // Doublecheck if the interval should still be rescheduled because it could have been cleared inside of func().
+                if (scheduledIntervalsState.get(timerId) === symbol) {
+                    schedule();
+                }
+            }
+        });
+        schedule();
+        return timerId;
+    };
+
+    const createSetTimeoutFactory = (generateUniqueNumber, scheduledTimeoutsState) => (set) => (func, delay = 0, ...args) => {
+        const symbol = Symbol();
+        const timerId = generateUniqueNumber(scheduledTimeoutsState);
+        scheduledTimeoutsState.set(timerId, symbol);
+        set(delay, timerId).then(() => {
+            const state = scheduledTimeoutsState.get(timerId);
+            if (state === undefined) {
+                throw new Error('The timer is in an undefined state.');
+            }
+            if (state === symbol) {
+                // A timeout can be savely deleted because it is only called once.
+                scheduledTimeoutsState.delete(timerId);
+                func(...args);
+            }
+        });
+        return timerId;
+    };
+
+    // Prefilling the Maps with a function indexed by zero is necessary to be compliant with the specification.
+    const scheduledIntervalsState = new Map([[0, null]]); // tslint:disable-line no-empty
+    const scheduledTimeoutsState = new Map([[0, null]]); // tslint:disable-line no-empty
+    const createClearInterval = createClearIntervalFactory(scheduledIntervalsState);
+    const createClearTimeout = createClearTimeoutFactory(scheduledTimeoutsState);
+    const createSetInterval = createSetIntervalFactory(generateUniqueNumber, scheduledIntervalsState);
+    const createSetTimeout = createSetTimeoutFactory(generateUniqueNumber, scheduledTimeoutsState);
+    const wrap = createBroker({
+        clearInterval: ({ call }) => createClearInterval((timerId) => call('clear', { timerId, timerType: 'interval' })),
+        clearTimeout: ({ call }) => createClearTimeout((timerId) => call('clear', { timerId, timerType: 'timeout' })),
+        setInterval: ({ call }) => createSetInterval((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'interval' })),
+        setTimeout: ({ call }) => createSetTimeout((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'timeout' }))
     });
     const load = (url) => {
         const worker = new Worker(url);
@@ -299,7 +293,7 @@
     };
 
     // This is the minified and stringified code of the worker-timers-worker package.
-    const worker = `(()=>{var e={455:function(e,t){!function(e){"use strict";var t=function(e){return function(t){var r=e(t);return t.add(r),r}},r=function(e){return function(t,r){return e.set(t,r),r}},n=void 0===Number.MAX_SAFE_INTEGER?9007199254740991:Number.MAX_SAFE_INTEGER,o=536870912,s=2*o,a=function(e,t){return function(r){var a=t.get(r),i=void 0===a?r.size:a<s?a+1:0;if(!r.has(i))return e(r,i);if(r.size<o){for(;r.has(i);)i=Math.floor(Math.random()*s);return e(r,i)}if(r.size>n)throw new Error("Congratulations, you created a collection of unique numbers which uses all available integers!");for(;r.has(i);)i=Math.floor(Math.random()*n);return e(r,i)}},i=new WeakMap,u=r(i),c=a(u,i),l=t(c);e.addUniqueNumber=l,e.generateUniqueNumber=c}(t)}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}(()=>{"use strict";const e=-32603,t=-32602,n=-32601,o=(e,t)=>Object.assign(new Error(e),{status:t}),s=t=>o('The handler of the method called "'.concat(t,'" returned an unexpected result.'),e),a=(t,r)=>async({data:{id:a,method:i,params:u}})=>{const c=r[i];try{if(void 0===c)throw(e=>o('The requested method called "'.concat(e,'" is not supported.'),n))(i);const r=void 0===u?c():c(u);if(void 0===r)throw(t=>o('The handler of the method called "'.concat(t,'" returned no required result.'),e))(i);const l=r instanceof Promise?await r:r;if(null===a){if(void 0!==l.result)throw s(i)}else{if(void 0===l.result)throw s(i);const{result:e,transferables:r=[]}=l;t.postMessage({id:a,result:e},r)}}catch(e){const{message:r,status:n=-32603}=e;t.postMessage({error:{code:n,message:r},id:a})}};var i=r(455);const u=new Map,c=(e,r,n)=>({...r,connect:({port:t})=>{t.start();const n=e(t,r),o=(0,i.generateUniqueNumber)(u);return u.set(o,()=>{n(),t.close(),u.delete(o)}),{result:o}},disconnect:({portId:e})=>{const r=u.get(e);if(void 0===r)throw(e=>o('The specified parameter called "portId" with the given value "'.concat(e,'" does not identify a port connected to this worker.'),t))(e);return r(),{result:null}},isSupported:async()=>{if(await new Promise(e=>{const t=new ArrayBuffer(0),{port1:r,port2:n}=new MessageChannel;r.onmessage=({data:t})=>e(null!==t),n.postMessage(t,[t])})){const e=n();return{result:e instanceof Promise?await e:e}}return{result:!1}}}),l=(e,t,r=()=>!0)=>{const n=c(l,t,r),o=a(e,n);return e.addEventListener("message",o),()=>e.removeEventListener("message",o)},d=(e,t)=>r=>{const n=t.get(r);if(void 0===n)return Promise.resolve(!1);const[o,s]=n;return e(o),t.delete(r),s(!1),Promise.resolve(!0)},f=(e,t,r,n)=>(o,s,a)=>{const i=o+s-t.timeOrigin,u=i-t.now();return new Promise(t=>{e.set(a,[r(n,u,i,e,t,a),t])})},m=new Map,h=d(globalThis.clearTimeout,m),p=new Map,v=d(globalThis.clearTimeout,p),w=((e,t)=>{const r=(n,o,s,a)=>{const i=n-e.now();i>0?o.set(a,[t(r,i,n,o,s,a),s]):(o.delete(a),s(!0))};return r})(performance,globalThis.setTimeout),g=f(m,performance,globalThis.setTimeout,w),T=f(p,performance,globalThis.setTimeout,w);l(self,{clear:async({timerId:e,timerType:t})=>({result:await("interval"===t?h(e):v(e))}),set:async({delay:e,now:t,timerId:r,timerType:n})=>({result:await("interval"===n?g:T)(e,t,r)})})})()})();`; // tslint:disable-line:max-line-length
+    const worker = `(()=>{var e={455(e,t){!function(e){"use strict";var t=function(e){return function(t){var r=e(t);return t.add(r),r}},r=function(e){return function(t,r){return e.set(t,r),r}},n=void 0===Number.MAX_SAFE_INTEGER?9007199254740991:Number.MAX_SAFE_INTEGER,o=536870912,s=2*o,a=function(e,t){return function(r){var a=t.get(r),i=void 0===a?r.size:a<s?a+1:0;if(!r.has(i))return e(r,i);if(r.size<o){for(;r.has(i);)i=Math.floor(Math.random()*s);return e(r,i)}if(r.size>n)throw new Error("Congratulations, you created a collection of unique numbers which uses all available integers!");for(;r.has(i);)i=Math.floor(Math.random()*n);return e(r,i)}},i=new WeakMap,u=r(i),c=a(u,i),l=t(c);e.addUniqueNumber=l,e.generateUniqueNumber=c}(t)}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}(()=>{"use strict";const e=-32603,t=-32602,n=-32601,o=(e,t)=>Object.assign(new Error(e),{status:t}),s=t=>o('The handler of the method called "'.concat(t,'" returned an unexpected result.'),e),a=(t,r)=>async({data:{id:a,method:i,params:u}})=>{const c=r[i];try{if(void 0===c)throw(e=>o('The requested method called "'.concat(e,'" is not supported.'),n))(i);const r=void 0===u?c():c(u);if(void 0===r)throw(t=>o('The handler of the method called "'.concat(t,'" returned no required result.'),e))(i);const l=r instanceof Promise?await r:r;if(null===a){if(void 0!==l.result)throw s(i)}else{if(void 0===l.result)throw s(i);const{result:e,transferables:r=[]}=l;t.postMessage({id:a,result:e},r)}}catch(e){const{message:r,status:n=-32603}=e;t.postMessage({error:{code:n,message:r},id:a})}};var i=r(455);const u=new Map,c=(e,r,n)=>({...r,connect:({port:t})=>{t.start();const n=e(t,r),o=(0,i.generateUniqueNumber)(u);return u.set(o,()=>{n(),t.close(),u.delete(o)}),{result:o}},disconnect:({portId:e})=>{const r=u.get(e);if(void 0===r)throw(e=>o('The specified parameter called "portId" with the given value "'.concat(e,'" does not identify a port connected to this worker.'),t))(e);return r(),{result:null}},isSupported:async()=>{if(await new Promise(e=>{const t=new ArrayBuffer(0),{port1:r,port2:n}=new MessageChannel;r.onmessage=({data:t})=>e(null!==t),n.postMessage(t,[t])})){const e=n();return{result:e instanceof Promise?await e:e}}return{result:!1}}}),l=(e,t,r=()=>!0)=>{const n=c(l,t,r),o=a(e,n);return e.addEventListener("message",o),()=>e.removeEventListener("message",o)},d=(e,t)=>r=>{const n=t.get(r);if(void 0===n)return Promise.resolve(!1);const[o,s]=n;return e(o),t.delete(r),s(!1),Promise.resolve(!0)},m=(e,t,r,n)=>(o,s,a)=>{const i=o+s-t.timeOrigin,u=i-t.now();return new Promise(t=>{e.set(a,[r(n,u,i,e,t,a),t])})},f=new Map,h=d(globalThis.clearTimeout,f),p=new Map,v=d(globalThis.clearTimeout,p),w=((e,t)=>{const r=(n,o,s,a)=>{const i=n-e.now();i>0?o.set(a,[t(r,i,n,o,s,a),s]):(o.delete(a),s(!0))};return r})(performance,globalThis.setTimeout),g=m(f,performance,globalThis.setTimeout,w),T=m(p,performance,globalThis.setTimeout,w);l(self,{clear:async({timerId:e,timerType:t})=>({result:await("interval"===t?h(e):v(e))}),set:async({delay:e,now:t,timerId:r,timerType:n})=>({result:await("interval"===n?g:T)(e,t,r)})})})()})();`; // tslint:disable-line:max-line-length
 
     const loadOrReturnBroker = createLoadOrReturnBroker(load, worker);
     const clearInterval$1 = (timerId) => loadOrReturnBroker().clearInterval(timerId);
@@ -527,13 +521,7 @@
         },
     };
 
-    const version = "1.7.5";
-
-    /* 数据 */
-    const GlobalData = {
-        /** .on添加在元素存储的事件 */
-        domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
-    };
+    const version = "1.8.1";
 
     class ElementSelector {
         windowApi;
@@ -1626,6 +1614,12 @@
     }
     new ElementAnimate();
 
+    /* 数据 */
+    const GlobalData = {
+        /** .on添加在元素存储的事件 */
+        domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+    };
+
     const OriginPrototype = {
         Object: {
             defineProperty: Object.defineProperty,
@@ -1685,7 +1679,7 @@
             if (element == null) {
                 return {
                     off() { },
-                    trigger() { },
+                    emit() { },
                 };
             }
             let $elList = [];
@@ -1820,10 +1814,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);
                 },
             };
         }
@@ -2002,7 +1996,7 @@
                 });
             });
         }
-        ready(...args) {
+        onReady(...args) {
             const callback = args[0];
             // 异步回调
             let resolve = void 0;
@@ -2096,16 +2090,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);
@@ -2147,7 +2141,7 @@
                             });
                         }
                     }
-                    if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
+                    if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
                         // 直接调用监听的事件
                         elementEvents[eventTypeItem].forEach((eventsItem) => {
                             eventsItem.callback(event);
@@ -2160,11 +2154,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"))
@@ -2173,7 +2167,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);
@@ -2184,23 +2178,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"))
@@ -2209,7 +2203,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);
@@ -2220,23 +2214,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"))
@@ -2245,7 +2239,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);
@@ -2256,12 +2250,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);
@@ -2274,14 +2268,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);
@@ -2292,7 +2286,7 @@
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.hover($ele, handler, option);
+                    that.onHover($ele, handler, option);
                 });
                 return;
             }
@@ -2300,12 +2294,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);
@@ -2328,12 +2322,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);
@@ -2370,7 +2364,7 @@
          *   console.log("按键松开");
          * })
          */
-        keyup(element, handler, option) {
+        onKeyup(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2381,7 +2375,7 @@
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.keyup($ele, handler, option);
+                    that.onKeyup($ele, handler, option);
                 });
                 return;
             }
@@ -2402,7 +2396,7 @@
          *   console.log("按键按下");
          * })
          */
-        keydown(element, handler, option) {
+        onKeydown(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2413,7 +2407,7 @@
             if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    that.keydown($ele, handler, option);
+                    that.onKeydown($ele, handler, option);
                 });
                 return;
             }
@@ -2434,7 +2428,7 @@
          *   console.log("按键按下");
          * })
          */
-        keypress(element, handler, option) {
+        onKeypress(element, handler, option) {
             const that = this;
             if (element == null) {
                 return;
@@ -2445,76 +2439,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);
@@ -2538,8 +2532,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);
@@ -2549,6 +2543,122 @@
                 },
             };
         }
+        /**
+         * 监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, option) => {
+                if (evt.type === "dblclick" && isMobileTouch) {
+                    // 禁止在移动端触发dblclick事件
+                    return;
+                }
+                await handler(evt, option);
+            };
+            const dblClickListener = this.on($el, "dblclick", (evt) => {
+                dblclick_handler(evt, {
+                    isDoubleClick: true,
+                });
+            }, 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, {
+                        isDoubleClick: true,
+                    });
+                }
+                else {
+                    timer = CommonUtils.setTimeout(() => {
+                        isDoubleClick = false;
+                        // 判断为单击
+                        dblclick_handler(evt, {
+                            isDoubleClick: false,
+                        });
+                    }, 200);
+                    isDoubleClick = true;
+                    $click = selectorTarget;
+                }
+            }, options);
+            return {
+                off() {
+                    $click = null;
+                    dblClickListener.off();
+                    touchEndListener.off();
+                },
+            };
+        }
         preventEvent(...args) {
             /**
              * 阻止事件的默认行为发生，并阻止事件传播