@whitesev/domutils 1.7.4 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -526,13 +526,7 @@ System.register('DOMUtils', [], (function (exports) {
526
526
  },
527
527
  };
528
528
 
529
- const version = "1.7.4";
530
-
531
- /* 数据 */
532
- const GlobalData = {
533
- /** .on添加在元素存储的事件 */
534
- domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
535
- };
529
+ const version = "1.8.0";
536
530
 
537
531
  class ElementSelector {
538
532
  windowApi;
@@ -904,35 +898,41 @@ System.register('DOMUtils', [], (function (exports) {
904
898
  if (target == null) {
905
899
  target = {};
906
900
  }
901
+ // 当前遍历的目标对象
902
+ let iteratorTarget;
907
903
  if (isAdd) {
908
- for (const sourceKeyName in source) {
909
- const targetKeyName = sourceKeyName;
910
- const targetValue = Reflect.get(target, targetKeyName);
911
- const sourceValue = Reflect.get(source, sourceKeyName);
912
- if (typeof sourceValue === "object" && sourceValue != null && sourceKeyName in target && !isDOM(sourceValue)) {
913
- /* 源端的值是object类型,且不是元素节点 */
914
- Reflect.set(target, sourceKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
915
- continue;
916
- }
917
- Reflect.set(target, sourceKeyName, sourceValue);
918
- }
904
+ // 追加并覆盖是以source为准
905
+ iteratorTarget = source;
919
906
  }
920
907
  else {
921
- for (const targetKeyName in target) {
922
- if (targetKeyName in source) {
923
- const targetValue = Reflect.get(target, targetKeyName);
924
- const sourceValue = Reflect.get(source, targetKeyName);
925
- if (typeof sourceValue === "object" &&
926
- sourceValue != null &&
927
- !isDOM(sourceValue) &&
928
- Object.keys(sourceValue).length) {
929
- /* 源端的值是object类型,且不是元素节点 */
930
- Reflect.set(target, targetKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
931
- continue;
908
+ // 覆盖以target为准
909
+ iteratorTarget = target;
910
+ }
911
+ for (const keyName in iteratorTarget) {
912
+ if (!isAdd && !(keyName in source)) {
913
+ // 仅替换 但是源端没有此键
914
+ continue;
915
+ }
916
+ const targetValue = Reflect.get(target, keyName);
917
+ const sourceValue = Reflect.get(source, keyName);
918
+ if (typeof sourceValue === "object" && sourceValue != null && keyName in target && !isDOM(sourceValue)) {
919
+ // 源端的值是object类型,且不是元素节点
920
+ // 如果是数组,那此数组中有值,清空旧的数组再赋值
921
+ let childObjectValue;
922
+ if (Array.isArray(sourceValue)) {
923
+ if (Array.isArray(targetValue)) {
924
+ targetValue.length = 0;
932
925
  }
933
- /* 直接赋值 */
934
- Reflect.set(target, targetKeyName, sourceValue);
926
+ childObjectValue = sourceValue;
927
+ }
928
+ else {
929
+ childObjectValue = UtilsContext.assign(targetValue, sourceValue, isAdd);
935
930
  }
931
+ Reflect.set(target, keyName, childObjectValue);
932
+ }
933
+ else {
934
+ /* 直接赋值 */
935
+ Reflect.set(target, keyName, sourceValue);
936
936
  }
937
937
  }
938
938
  return target;
@@ -1619,6 +1619,12 @@ System.register('DOMUtils', [], (function (exports) {
1619
1619
  }
1620
1620
  new ElementAnimate();
1621
1621
 
1622
+ /* 数据 */
1623
+ const GlobalData = {
1624
+ /** .on添加在元素存储的事件 */
1625
+ domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
1626
+ };
1627
+
1622
1628
  const OriginPrototype = {
1623
1629
  Object: {
1624
1630
  defineProperty: Object.defineProperty,
@@ -1678,7 +1684,7 @@ System.register('DOMUtils', [], (function (exports) {
1678
1684
  if (element == null) {
1679
1685
  return {
1680
1686
  off() { },
1681
- trigger() { },
1687
+ emit() { },
1682
1688
  };
1683
1689
  }
1684
1690
  let $elList = [];
@@ -1813,10 +1819,10 @@ System.register('DOMUtils', [], (function (exports) {
1813
1819
  /**
1814
1820
  * 主动触发事件
1815
1821
  * @param details 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
1816
- * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
1822
+ * @param useDispatchToEmit 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
1817
1823
  */
1818
- trigger: (details, useDispatchToTriggerEvent) => {
1819
- that.trigger($elList, eventTypeList, details, useDispatchToTriggerEvent);
1824
+ emit: (details, useDispatchToEmit) => {
1825
+ that.emit($elList, eventTypeList, details, useDispatchToEmit);
1820
1826
  },
1821
1827
  };
1822
1828
  }
@@ -1995,7 +2001,7 @@ System.register('DOMUtils', [], (function (exports) {
1995
2001
  });
1996
2002
  });
1997
2003
  }
1998
- ready(...args) {
2004
+ onReady(...args) {
1999
2005
  const callback = args[0];
2000
2006
  // 异步回调
2001
2007
  let resolve = void 0;
@@ -2089,16 +2095,16 @@ System.register('DOMUtils', [], (function (exports) {
2089
2095
  * @param element 需要触发的元素|元素数组|window
2090
2096
  * @param eventType 需要触发的事件
2091
2097
  * @param details 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
2092
- * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
2098
+ * @param useDispatchToEmit 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了selectorTarget的没有值
2093
2099
  * @example
2094
2100
  * // 触发元素a.xx的click事件
2095
- * DOMUtils.trigger(document.querySelector("a.xx"),"click")
2096
- * DOMUtils.trigger("a.xx","click")
2101
+ * DOMUtils.emit(document.querySelector("a.xx"),"click")
2102
+ * DOMUtils.emit("a.xx","click")
2097
2103
  * // 触发元素a.xx的click、tap、hover事件
2098
- * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
2099
- * DOMUtils.trigger("a.xx",["click","tap","hover"])
2104
+ * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
2105
+ * DOMUtils.emit("a.xx",["click","tap","hover"])
2100
2106
  */
2101
- trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
2107
+ emit(element, eventType, details, useDispatchToEmit = true) {
2102
2108
  const that = this;
2103
2109
  if (typeof element === "string") {
2104
2110
  element = that.selectorAll(element);
@@ -2140,7 +2146,7 @@ System.register('DOMUtils', [], (function (exports) {
2140
2146
  });
2141
2147
  }
2142
2148
  }
2143
- if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
2149
+ if (useDispatchToEmit == false && eventTypeItem in elementEvents) {
2144
2150
  // 直接调用监听的事件
2145
2151
  elementEvents[eventTypeItem].forEach((eventsItem) => {
2146
2152
  eventsItem.callback(event);
@@ -2153,11 +2159,11 @@ System.register('DOMUtils', [], (function (exports) {
2153
2159
  });
2154
2160
  }
2155
2161
  /**
2156
- * 绑定或触发元素的click事件
2162
+ * 监听或触发元素的click事件
2157
2163
  * @param element 目标元素
2158
2164
  * @param handler (可选)事件处理函数
2159
2165
  * @param details (可选)赋予触发的Event的额外属性
2160
- * @param useDispatchToTriggerEvent (可选)是否使用dispatchEvent来触发事件,默认true
2166
+ * @param useDispatchToEmit (可选)是否使用dispatchEvent来触发事件,默认true
2161
2167
  * @example
2162
2168
  * // 触发元素a.xx的click事件
2163
2169
  * DOMUtils.click(document.querySelector("a.xx"))
@@ -2166,7 +2172,7 @@ System.register('DOMUtils', [], (function (exports) {
2166
2172
  * console.log("触发click事件成功")
2167
2173
  * })
2168
2174
  * */
2169
- click(element, handler, details, useDispatchToTriggerEvent) {
2175
+ click(element, handler, details, useDispatchToEmit) {
2170
2176
  const that = this;
2171
2177
  if (typeof element === "string") {
2172
2178
  element = that.selectorAll(element);
@@ -2177,23 +2183,23 @@ System.register('DOMUtils', [], (function (exports) {
2177
2183
  if (CommonUtils.isNodeList(element)) {
2178
2184
  // 设置
2179
2185
  element.forEach(($ele) => {
2180
- that.click($ele, handler, details, useDispatchToTriggerEvent);
2186
+ that.click($ele, handler, details, useDispatchToEmit);
2181
2187
  });
2182
2188
  return;
2183
2189
  }
2184
2190
  if (handler == null) {
2185
- that.trigger(element, "click", details, useDispatchToTriggerEvent);
2191
+ that.emit(element, "click", details, useDispatchToEmit);
2186
2192
  }
2187
2193
  else {
2188
2194
  that.on(element, "click", null, handler);
2189
2195
  }
2190
2196
  }
2191
2197
  /**
2192
- * 绑定或触发元素的blur事件
2198
+ * 监听或触发元素的blur事件
2193
2199
  * @param element 目标元素
2194
2200
  * @param handler (可选)事件处理函数
2195
2201
  * @param details (可选)赋予触发的Event的额外属性
2196
- * @param useDispatchToTriggerEvent (可选)是否使用dispatchEvent来触发事件,默认true
2202
+ * @param useDispatchToEmit (可选)是否使用dispatchEvent来触发事件,默认true
2197
2203
  * @example
2198
2204
  * // 触发元素a.xx的blur事件
2199
2205
  * DOMUtils.blur(document.querySelector("a.xx"))
@@ -2202,7 +2208,7 @@ System.register('DOMUtils', [], (function (exports) {
2202
2208
  * console.log("触发blur事件成功")
2203
2209
  * })
2204
2210
  * */
2205
- blur(element, handler, details, useDispatchToTriggerEvent) {
2211
+ blur(element, handler, details, useDispatchToEmit) {
2206
2212
  const that = this;
2207
2213
  if (typeof element === "string") {
2208
2214
  element = that.selectorAll(element);
@@ -2213,23 +2219,23 @@ System.register('DOMUtils', [], (function (exports) {
2213
2219
  if (CommonUtils.isNodeList(element)) {
2214
2220
  // 设置
2215
2221
  element.forEach(($ele) => {
2216
- that.focus($ele, handler, details, useDispatchToTriggerEvent);
2222
+ that.focus($ele, handler, details, useDispatchToEmit);
2217
2223
  });
2218
2224
  return;
2219
2225
  }
2220
2226
  if (handler === null) {
2221
- that.trigger(element, "blur", details, useDispatchToTriggerEvent);
2227
+ that.emit(element, "blur", details, useDispatchToEmit);
2222
2228
  }
2223
2229
  else {
2224
2230
  that.on(element, "blur", null, handler);
2225
2231
  }
2226
2232
  }
2227
2233
  /**
2228
- * 绑定或触发元素的focus事件
2234
+ * 监听或触发元素的focus事件
2229
2235
  * @param element 目标元素
2230
2236
  * @param handler (可选)事件处理函数
2231
2237
  * @param details (可选)赋予触发的Event的额外属性
2232
- * @param useDispatchToTriggerEvent (可选)是否使用dispatchEvent来触发事件,默认true
2238
+ * @param useDispatchToEmit (可选)是否使用dispatchEvent来触发事件,默认true
2233
2239
  * @example
2234
2240
  * // 触发元素a.xx的focus事件
2235
2241
  * DOMUtils.focus(document.querySelector("a.xx"))
@@ -2238,7 +2244,7 @@ System.register('DOMUtils', [], (function (exports) {
2238
2244
  * console.log("触发focus事件成功")
2239
2245
  * })
2240
2246
  * */
2241
- focus(element, handler, details, useDispatchToTriggerEvent) {
2247
+ focus(element, handler, details, useDispatchToEmit) {
2242
2248
  const that = this;
2243
2249
  if (typeof element === "string") {
2244
2250
  element = that.selectorAll(element);
@@ -2249,12 +2255,12 @@ System.register('DOMUtils', [], (function (exports) {
2249
2255
  if (CommonUtils.isNodeList(element)) {
2250
2256
  // 设置
2251
2257
  element.forEach(($ele) => {
2252
- that.focus($ele, handler, details, useDispatchToTriggerEvent);
2258
+ that.focus($ele, handler, details, useDispatchToEmit);
2253
2259
  });
2254
2260
  return;
2255
2261
  }
2256
2262
  if (handler == null) {
2257
- that.trigger(element, "focus", details, useDispatchToTriggerEvent);
2263
+ that.emit(element, "focus", details, useDispatchToEmit);
2258
2264
  }
2259
2265
  else {
2260
2266
  that.on(element, "focus", null, handler);
@@ -2267,14 +2273,14 @@ System.register('DOMUtils', [], (function (exports) {
2267
2273
  * @param option 配置
2268
2274
  * @example
2269
2275
  * // 监听a.xx元素的移入或移出
2270
- * DOMUtils.hover(document.querySelector("a.xx"),()=>{
2276
+ * DOMUtils.onHover(document.querySelector("a.xx"),()=>{
2271
2277
  * console.log("移入/移除");
2272
2278
  * })
2273
- * DOMUtils.hover("a.xx",()=>{
2279
+ * DOMUtils.onHover("a.xx",()=>{
2274
2280
  * console.log("移入/移除");
2275
2281
  * })
2276
2282
  */
2277
- hover(element, handler, option) {
2283
+ onHover(element, handler, option) {
2278
2284
  const that = this;
2279
2285
  if (typeof element === "string") {
2280
2286
  element = that.selectorAll(element);
@@ -2285,7 +2291,7 @@ System.register('DOMUtils', [], (function (exports) {
2285
2291
  if (CommonUtils.isNodeList(element)) {
2286
2292
  // 设置
2287
2293
  element.forEach(($ele) => {
2288
- that.hover($ele, handler, option);
2294
+ that.onHover($ele, handler, option);
2289
2295
  });
2290
2296
  return;
2291
2297
  }
@@ -2293,12 +2299,12 @@ System.register('DOMUtils', [], (function (exports) {
2293
2299
  that.on(element, "mouseleave", null, handler, option);
2294
2300
  }
2295
2301
  /**
2296
- * 当动画结束时触发事件
2302
+ * 监听动画结束
2297
2303
  * @param element 监听的元素
2298
2304
  * @param handler 触发的回调函数
2299
2305
  * @param option 配置项,这里默认配置once为true
2300
2306
  */
2301
- animationend(element, handler, option) {
2307
+ onAnimationend(element, handler, option) {
2302
2308
  const that = this;
2303
2309
  if (typeof element === "string") {
2304
2310
  element = that.selector(element);
@@ -2321,12 +2327,12 @@ System.register('DOMUtils', [], (function (exports) {
2321
2327
  }
2322
2328
  }
2323
2329
  /**
2324
- * 当过渡结束时触发事件
2330
+ * 监听过渡结束
2325
2331
  * @param element 监听的元素
2326
2332
  * @param handler 触发的回调函数
2327
2333
  * @param option 配置项,这里默认配置once为true
2328
2334
  */
2329
- transitionend(element, handler, option) {
2335
+ onTransitionend(element, handler, option) {
2330
2336
  const that = this;
2331
2337
  if (typeof element === "string") {
2332
2338
  element = that.selector(element);
@@ -2363,7 +2369,7 @@ System.register('DOMUtils', [], (function (exports) {
2363
2369
  * console.log("按键松开");
2364
2370
  * })
2365
2371
  */
2366
- keyup(element, handler, option) {
2372
+ onKeyup(element, handler, option) {
2367
2373
  const that = this;
2368
2374
  if (element == null) {
2369
2375
  return;
@@ -2374,7 +2380,7 @@ System.register('DOMUtils', [], (function (exports) {
2374
2380
  if (CommonUtils.isNodeList(element)) {
2375
2381
  // 设置
2376
2382
  element.forEach(($ele) => {
2377
- that.keyup($ele, handler, option);
2383
+ that.onKeyup($ele, handler, option);
2378
2384
  });
2379
2385
  return;
2380
2386
  }
@@ -2395,7 +2401,7 @@ System.register('DOMUtils', [], (function (exports) {
2395
2401
  * console.log("按键按下");
2396
2402
  * })
2397
2403
  */
2398
- keydown(element, handler, option) {
2404
+ onKeydown(element, handler, option) {
2399
2405
  const that = this;
2400
2406
  if (element == null) {
2401
2407
  return;
@@ -2406,7 +2412,7 @@ System.register('DOMUtils', [], (function (exports) {
2406
2412
  if (CommonUtils.isNodeList(element)) {
2407
2413
  // 设置
2408
2414
  element.forEach(($ele) => {
2409
- that.keydown($ele, handler, option);
2415
+ that.onKeydown($ele, handler, option);
2410
2416
  });
2411
2417
  return;
2412
2418
  }
@@ -2427,7 +2433,7 @@ System.register('DOMUtils', [], (function (exports) {
2427
2433
  * console.log("按键按下");
2428
2434
  * })
2429
2435
  */
2430
- keypress(element, handler, option) {
2436
+ onKeypress(element, handler, option) {
2431
2437
  const that = this;
2432
2438
  if (element == null) {
2433
2439
  return;
@@ -2438,76 +2444,76 @@ System.register('DOMUtils', [], (function (exports) {
2438
2444
  if (CommonUtils.isNodeList(element)) {
2439
2445
  // 设置
2440
2446
  element.forEach(($ele) => {
2441
- that.keypress($ele, handler, option);
2447
+ that.onKeypress($ele, handler, option);
2442
2448
  });
2443
2449
  return;
2444
2450
  }
2445
2451
  that.on(element, "keypress", null, handler, option);
2446
2452
  }
2447
2453
  /**
2448
- * 监听某个元素键盘按键事件或window全局按键事件
2449
- * 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
2450
- * @param element 需要监听的对象,可以是全局Window或者某个元素
2451
- * @param eventName 事件名,默认keypress
2452
- * @param callback 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
2454
+ * 监听某个元素键盘按键事件或window全局按键事件
2455
+ * 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
2456
+ * @param element 需要监听的对象,可以是全局Window或者某个元素
2457
+ * @param eventName 事件名,默认keypress,keydown - > keypress - > keyup
2458
+ * @param handler 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
2453
2459
  * @param options 监听事件的配置
2454
- * @example
2455
- Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
2456
- if(keyName === "Enter"){
2457
- console.log("回车按键的值是:"+keyValue)
2458
- }
2459
- if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
2460
- console.log("Ctrl和回车键");
2461
- }
2462
- })
2463
- * @example
2464
- 字母和数字键的键码值(keyCode)
2465
- 按键 键码 按键 键码 按键 键码 按键 键码
2466
- A 65 J 74 S 83 1 49
2467
- B 66 K 75 T 84 2 50
2468
- C 67 L 76 U 85 3 51
2469
- D 68 M 77 V 86 4 52
2470
- E 69 N 78 W 87 5 53
2471
- F 70 O 79 X 88 6 54
2472
- G 71 P 80 Y 89 7 55
2473
- H 72 Q 81 Z 90 8 56
2474
- I 73 R 82 0 48 9 57
2475
-
2476
- 数字键盘上的键的键码值(keyCode)
2477
- 功能键键码值(keyCode)
2478
- 按键 键码 按键 键码 按键 键码 按键 键码
2479
- 0 96 8 104 F1 112 F7 118
2480
- 1 97 9 105 F2 113 F8 119
2481
- 2 98 * 106 F3 114 F9 120
2482
- 3 99 + 107 F4 115 F10 121
2483
- 4 100 Enter 108 F5 116 F11 122
2484
- 5 101 - 109 F6 117 F12 123
2485
- 6 102 . 110
2486
- 7 103 / 111
2487
-
2488
- 控制键键码值(keyCode)
2489
- 按键 键码 按键 键码 按键 键码 按键 键码
2490
- BackSpace 8 Esc 27 → 39 -_ 189
2491
- Tab 9 Spacebar 32 ↓ 40 .> 190
2492
- Clear 12 Page Up 33 Insert 45 /? 191
2493
- Enter 13 Page Down 34 Delete 46 `~ 192
2494
- Shift 16 End 35 Num Lock 144 [{ 219
2495
- Control 17 Home 36 ;: 186 \| 220
2496
- Alt 18 ← 37 =+ 187 ]} 221
2497
- Cape Lock 20 ↑ 38 ,< 188 '" 222
2498
-
2499
- 多媒体键码值(keyCode)
2500
- 按键 键码
2501
- 音量加 175
2502
- 音量减 174
2503
- 停止 179
2504
- 静音 173
2505
- 浏览器 172
2506
- 邮件 180
2507
- 搜索 170
2508
- 收藏 171
2509
- **/
2510
- listenKeyboard(element, eventName = "keypress", callback, options) {
2460
+ * @example
2461
+ Utils.onKeyboard(window,(keyName,keyValue,otherKey,event)=>{
2462
+ if(keyName === "Enter"){
2463
+ console.log("回车按键的值是:"+keyValue)
2464
+ }
2465
+ if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
2466
+ console.log("Ctrl和回车键");
2467
+ }
2468
+ })
2469
+ * @example
2470
+ 字母和数字键的键码值(keyCode)
2471
+ 按键 键码 按键 键码 按键 键码 按键 键码
2472
+ A 65 J 74 S 83 1 49
2473
+ B 66 K 75 T 84 2 50
2474
+ C 67 L 76 U 85 3 51
2475
+ D 68 M 77 V 86 4 52
2476
+ E 69 N 78 W 87 5 53
2477
+ F 70 O 79 X 88 6 54
2478
+ G 71 P 80 Y 89 7 55
2479
+ H 72 Q 81 Z 90 8 56
2480
+ I 73 R 82 0 48 9 57
2481
+
2482
+ 数字键盘上的键的键码值(keyCode)
2483
+ 功能键键码值(keyCode)
2484
+ 按键 键码 按键 键码 按键 键码 按键 键码
2485
+ 0 96 8 104 F1 112 F7 118
2486
+ 1 97 9 105 F2 113 F8 119
2487
+ 2 98 * 106 F3 114 F9 120
2488
+ 3 99 + 107 F4 115 F10 121
2489
+ 4 100 Enter 108 F5 116 F11 122
2490
+ 5 101 - 109 F6 117 F12 123
2491
+ 6 102 . 110
2492
+ 7 103 / 111
2493
+
2494
+ 控制键键码值(keyCode)
2495
+ 按键 键码 按键 键码 按键 键码 按键 键码
2496
+ BackSpace 8 Esc 27 → 39 -_ 189
2497
+ Tab 9 Spacebar 32 ↓ 40 .> 190
2498
+ Clear 12 Page Up 33 Insert 45 /? 191
2499
+ Enter 13 Page Down 34 Delete 46 `~ 192
2500
+ Shift 16 End 35 Num Lock 144 [{ 219
2501
+ Control 17 Home 36 ;: 186 \| 220
2502
+ Alt 18 ← 37 =+ 187 ]} 221
2503
+ Cape Lock 20 ↑ 38 ,< 188 '" 222
2504
+
2505
+ 多媒体键码值(keyCode)
2506
+ 按键 键码
2507
+ 音量加 175
2508
+ 音量减 174
2509
+ 停止 179
2510
+ 静音 173
2511
+ 浏览器 172
2512
+ 邮件 180
2513
+ 搜索 170
2514
+ 收藏 171
2515
+ **/
2516
+ onKeyboard(element, eventName = "keypress", handler, options) {
2511
2517
  const that = this;
2512
2518
  if (typeof element === "string") {
2513
2519
  element = that.selectorAll(element);
@@ -2531,8 +2537,8 @@ System.register('DOMUtils', [], (function (exports) {
2531
2537
  if (event.shiftKey) {
2532
2538
  otherCodeList.push("shift");
2533
2539
  }
2534
- if (typeof callback === "function") {
2535
- callback(keyName, keyValue, otherCodeList, event);
2540
+ if (typeof handler === "function") {
2541
+ handler(keyName, keyValue, otherCodeList, event);
2536
2542
  }
2537
2543
  };
2538
2544
  that.on(element, eventName, keyboardEventCallBack, options);
@@ -2542,6 +2548,113 @@ System.register('DOMUtils', [], (function (exports) {
2542
2548
  },
2543
2549
  };
2544
2550
  }
2551
+ /**
2552
+ * 监input、textarea的输入框值改变的事件(当输入法输入时,不会触发该监听)
2553
+ * @param $el 输入框元素
2554
+ * @param handler 回调函数
2555
+ * @param option 配置
2556
+ */
2557
+ onInput($el, handler, option) {
2558
+ /**
2559
+ * 是否正在输入中
2560
+ */
2561
+ let isComposite = false;
2562
+ const __callback = async (event) => {
2563
+ if (isComposite)
2564
+ return;
2565
+ await handler(event);
2566
+ };
2567
+ const __composition_start_callback = () => {
2568
+ isComposite = true;
2569
+ };
2570
+ const __composition_end_callback = () => {
2571
+ isComposite = false;
2572
+ this.emit($el, "input", {
2573
+ isComposite,
2574
+ });
2575
+ };
2576
+ const inputListener = this.on($el, "input", __callback, option);
2577
+ const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
2578
+ const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
2579
+ return {
2580
+ off: () => {
2581
+ inputListener.off();
2582
+ compositionStartListener.off();
2583
+ compositionEndListener.off();
2584
+ },
2585
+ };
2586
+ }
2587
+ onDoubleClick(...args) {
2588
+ const $el = args[0];
2589
+ let selector = void 0;
2590
+ let handler;
2591
+ let options;
2592
+ if (args.length === 2) {
2593
+ if (typeof args[1] === "function") {
2594
+ handler = args[1];
2595
+ }
2596
+ else {
2597
+ throw new TypeError("handler is not a function");
2598
+ }
2599
+ }
2600
+ else if (args.length === 3) {
2601
+ if (typeof args[1] === "function") {
2602
+ handler = args[1];
2603
+ options = args[2];
2604
+ }
2605
+ else {
2606
+ selector = args[1];
2607
+ handler = args[2];
2608
+ }
2609
+ }
2610
+ else if (args.length === 4) {
2611
+ selector = args[1];
2612
+ handler = args[2];
2613
+ options = args[3];
2614
+ }
2615
+ else {
2616
+ throw new Error("args length error");
2617
+ }
2618
+ let $click = null;
2619
+ let isDoubleClick = false;
2620
+ let timer = void 0;
2621
+ /** 是否是移动端点击 */
2622
+ let isMobileTouch = false;
2623
+ const dblclick_handler = async (evt) => {
2624
+ if (evt.type === "dblclick" && isMobileTouch) {
2625
+ // 禁止在移动端触发dblclick事件
2626
+ return;
2627
+ }
2628
+ await handler(evt);
2629
+ };
2630
+ const dblClickListener = this.on($el, "dblclick", dblclick_handler, options);
2631
+ const touchEndListener = this.on($el, "touchend", selector, (evt, selectorTarget) => {
2632
+ isMobileTouch = true;
2633
+ CommonUtils.clearTimeout(timer);
2634
+ timer = void 0;
2635
+ if (isDoubleClick && $click === selectorTarget) {
2636
+ isDoubleClick = false;
2637
+ $click = null;
2638
+ /* 判定为双击 */
2639
+ dblclick_handler(evt);
2640
+ }
2641
+ else {
2642
+ timer = CommonUtils.setTimeout(() => {
2643
+ isDoubleClick = false;
2644
+ // 判断为单击
2645
+ }, 200);
2646
+ isDoubleClick = true;
2647
+ $click = selectorTarget;
2648
+ }
2649
+ }, options);
2650
+ return {
2651
+ off() {
2652
+ $click = null;
2653
+ dblClickListener.off();
2654
+ touchEndListener.off();
2655
+ },
2656
+ };
2657
+ }
2545
2658
  preventEvent(...args) {
2546
2659
  /**
2547
2660
  * 阻止事件的默认行为发生,并阻止事件传播