@whitesev/domutils 1.4.6 → 1.4.8

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.
Files changed (17) hide show
  1. package/dist/index.amd.js +27 -26
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +27 -26
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +27 -26
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +27 -26
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +27 -26
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +27 -26
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/DOMUtilsEvent.d.ts +6 -6
  14. package/dist/types/src/types/DOMUtilsEvent.d.ts +1 -1
  15. package/package.json +1 -1
  16. package/src/DOMUtilsEvent.ts +43 -43
  17. package/src/types/DOMUtilsEvent.d.ts +1 -1
package/dist/types/src/DOMUtilsEvent.d.ts CHANGED
@@ -67,7 +67,7 @@ export declare class DOMUtilsEvent {
67
67
  * console.log("事件触发",event)
68
68
  * })
69
69
  */
70
- on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget?: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
70
+ on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
71
71
  /**
72
72
  * 绑定事件
73
73
  * @param element 需要绑定的元素|元素数组|window
@@ -92,7 +92,7 @@ export declare class DOMUtilsEvent {
92
92
  * console.log("事件触发",event)
93
93
  * })
94
94
  */
95
- on<T extends Event>(element: DOMUtilsElementEventType, eventType: string, selector: string | string[] | (() => string | string[]) | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
95
+ on<T extends Event>(element: DOMUtilsElementEventType, eventType: string, selector: string | string[] | (() => string | string[]) | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
96
96
  /**
97
97
  * 取消绑定事件
98
98
  * @param element 需要取消绑定的元素|元素数组
@@ -106,7 +106,7 @@ export declare class DOMUtilsEvent {
106
106
  * DOMUtils.off(document.querySelector("a.xx"),"click")
107
107
  * DOMUtils.off("a.xx","click")
108
108
  */
109
- off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget?: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
109
+ off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
110
110
  /**
111
111
  * 取消绑定事件
112
112
  * @param element 需要取消绑定的元素|元素数组
@@ -120,7 +120,7 @@ export declare class DOMUtilsEvent {
120
120
  * DOMUtils.off(document.querySelector("a.xx"),"click")
121
121
  * DOMUtils.off("a.xx","click")
122
122
  */
123
- off<T extends Event>(element: DOMUtilsElementEventType, eventType: string, callback?: (this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
123
+ off<T extends Event>(element: DOMUtilsElementEventType, eventType: string, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
124
124
  /**
125
125
  * 取消绑定事件
126
126
  * @param element 需要取消绑定的元素|元素数组
@@ -135,7 +135,7 @@ export declare class DOMUtilsEvent {
135
135
  * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
136
136
  * DOMUtils.off("a.xx",["click","tap","hover"])
137
137
  */
138
- off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined, callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget?: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
138
+ off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined, callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
139
139
  /**
140
140
  * 取消绑定事件
141
141
  * @param element 需要取消绑定的元素|元素数组
@@ -150,7 +150,7 @@ export declare class DOMUtilsEvent {
150
150
  * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
151
151
  * DOMUtils.off("a.xx",["click","tap","hover"])
152
152
  */
153
- off<T extends Event>(element: DOMUtilsElementEventType, eventType: string, selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined, callback?: (this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
153
+ off<T extends Event>(element: DOMUtilsElementEventType, eventType: string, selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
154
154
  /**
155
155
  * 取消绑定所有的事件
156
156
  * @param element 需要取消绑定的元素|元素数组
package/dist/types/src/types/DOMUtilsEvent.d.ts CHANGED
@@ -215,7 +215,7 @@ export declare interface DOMUtilsEventListenerOptionsAttribute {
215
215
  /**
216
216
  * 用户添加的事件
217
217
  */
218
- originCallBack: (event: Event) => void;
218
+ originCallBack: (event: Event, selectorTarget?: HTMLElement) => void;
219
219
  /**
220
220
  * 子元素选择器
221
221
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whitesev/domutils",
3
- "version": "1.4.6",
3
+ "version": "1.4.8",
4
4
  "description": "使用js重新对jQuery的部分函数进行了仿写",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
package/src/DOMUtilsEvent.ts CHANGED
@@ -97,7 +97,7 @@ export class DOMUtilsEvent {
97
97
  callback: (
98
98
  this: HTMLElement,
99
99
  event: DOMUtils_Event[T],
100
- selectorTarget?: HTMLElement
100
+ selectorTarget: HTMLElement
101
101
  ) => void,
102
102
  option?: DOMUtilsEventListenerOption | boolean
103
103
  ): void;
@@ -132,7 +132,7 @@ export class DOMUtilsEvent {
132
132
  callback: (
133
133
  this: HTMLElement,
134
134
  event: T,
135
- selectorTarget?: HTMLElement
135
+ selectorTarget: HTMLElement
136
136
  ) => void,
137
137
  option?: DOMUtilsEventListenerOption | boolean
138
138
  ): void;
@@ -152,10 +152,10 @@ export class DOMUtilsEvent {
152
152
  | string
153
153
  | undefined
154
154
  | string[]
155
- | ((this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void)
155
+ | ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void)
156
156
  | null,
157
157
  callback?:
158
- | ((this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void)
158
+ | ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void)
159
159
  | DOMUtilsEventListenerOption
160
160
  | boolean,
161
161
  option?: DOMUtilsEventListenerOption | boolean
@@ -265,47 +265,44 @@ export class DOMUtilsEvent {
265
265
  * @param event
266
266
  */
267
267
  function domUtilsEventCallBack(event: Event) {
268
- let eventTarget = listenerOption.isComposedPath
269
- ? (event.composedPath()[0] as HTMLElement)
270
- : (event.target as HTMLElement);
271
268
  if (selectorList.length) {
272
269
  /* 存在子元素选择器 */
270
+ // 这时候的this和target都是子元素选择器的元素
271
+ let eventTarget = listenerOption.isComposedPath
272
+ ? (event.composedPath()[0] as HTMLElement)
273
+ : (event.target as HTMLElement);
273
274
  let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
274
275
  ? DOMUtilsContext.windowApi.document.documentElement
275
276
  : elementItem;
276
- for (let index = 0; index < selectorList.length; index++) {
277
- const selectorItem = selectorList[index];
277
+ let findValue = selectorList.find((selectorItem) => {
278
+ // 判断目标元素是否匹配选择器
278
279
  if (eventTarget.matches(selectorItem)) {
279
280
  /* 当前目标可以被selector所匹配到 */
280
- listenerCallBack.call(eventTarget, event as any, eventTarget);
281
- checkOptionOnceToRemoveEventListener();
282
- break;
283
- } else {
284
- /* 在上层与主元素之间寻找可以被selector所匹配到的 */
285
- let $closestMatches = eventTarget.closest(
286
- selectorItem
287
- ) as HTMLElement | null;
288
- if ($closestMatches && totalParent.contains($closestMatches)) {
289
- /* event的target值不能直接修改 */
290
- // 这里尝试使用defineProperty修改event的target值
291
- try {
292
- OriginPrototype.Object.defineProperty(event, "target", {
293
- get() {
294
- return $closestMatches;
295
- },
296
- });
297
- } catch (error) {}
298
- listenerCallBack.call(
299
- $closestMatches,
300
- event as any,
301
- $closestMatches
302
- );
303
- checkOptionOnceToRemoveEventListener();
304
- break;
305
- }
281
+ return true;
282
+ }
283
+ /* 在上层与主元素之间寻找可以被selector所匹配到的 */
284
+ let $closestMatches =
285
+ eventTarget.closest<HTMLElement>(selectorItem);
286
+ if ($closestMatches && totalParent.contains($closestMatches)) {
287
+ eventTarget = $closestMatches;
288
+ return true;
306
289
  }
290
+ return false;
291
+ });
292
+ if (findValue) {
293
+ // 这里尝试使用defineProperty修改event的target值
294
+ try {
295
+ OriginPrototype.Object.defineProperty(event, "target", {
296
+ get() {
297
+ return eventTarget;
298
+ },
299
+ });
300
+ } catch (error) {}
301
+ listenerCallBack.call(eventTarget, event as any, eventTarget);
302
+ checkOptionOnceToRemoveEventListener();
307
303
  }
308
304
  } else {
305
+ // 这时候的this指向监听的元素
309
306
  listenerCallBack.call(elementItem, event as any);
310
307
  checkOptionOnceToRemoveEventListener();
311
308
  }
@@ -356,7 +353,7 @@ export class DOMUtilsEvent {
356
353
  callback?: (
357
354
  this: HTMLElement,
358
355
  event: DOMUtils_Event[T],
359
- selectorTarget?: HTMLElement
356
+ selectorTarget: HTMLElement
360
357
  ) => void,
361
358
  option?: boolean | EventListenerOptions,
362
359
  filter?: (
@@ -384,7 +381,7 @@ export class DOMUtilsEvent {
384
381
  callback?: (
385
382
  this: HTMLElement,
386
383
  event: T,
387
- selectorTarget?: HTMLElement
384
+ selectorTarget: HTMLElement
388
385
  ) => void,
389
386
  option?: boolean | EventListenerOptions,
390
387
  filter?: (
@@ -414,7 +411,7 @@ export class DOMUtilsEvent {
414
411
  callback?: (
415
412
  this: HTMLElement,
416
413
  event: DOMUtils_Event[T],
417
- selectorTarget?: HTMLElement
414
+ selectorTarget: HTMLElement
418
415
  ) => void,
419
416
  option?: boolean | EventListenerOptions,
420
417
  filter?: (
@@ -444,7 +441,7 @@ export class DOMUtilsEvent {
444
441
  callback?: (
445
442
  this: HTMLElement,
446
443
  event: T,
447
- selectorTarget?: HTMLElement
444
+ selectorTarget: HTMLElement
448
445
  ) => void,
449
446
  option?: boolean | EventListenerOptions,
450
447
  filter?: (
@@ -468,9 +465,9 @@ export class DOMUtilsEvent {
468
465
  selector?:
469
466
  | DOMUtilsEventListenerOptionsAttribute["selector"]
470
467
  | undefined
471
- | ((this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void),
468
+ | ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void),
472
469
  callback?:
473
- | ((this: HTMLElement, event: T, selectorTarget?: HTMLElement) => void)
470
+ | ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void)
474
471
  | boolean
475
472
  | EventListenerOptions,
476
473
  option?:
@@ -540,8 +537,11 @@ export class DOMUtilsEvent {
540
537
  /**
541
538
  * 事件的回调函数
542
539
  */
543
- let listenerCallBack: (this: HTMLElement, event: T) => void =
544
- callback as any;
540
+ let listenerCallBack: (
541
+ this: HTMLElement,
542
+ event: T,
543
+ selectorTarget: HTMLElement
544
+ ) => void = callback as any;
545
545
 
546
546
  /**
547
547
  * 事件的配置
package/src/types/DOMUtilsEvent.d.ts CHANGED
@@ -215,7 +215,7 @@ export declare interface DOMUtilsEventListenerOptionsAttribute {
215
215
  /**
216
216
  * 用户添加的事件
217
217
  */
218
- originCallBack: (event: Event) => void;
218
+ originCallBack: (event: Event, selectorTarget?: HTMLElement) => void;
219
219
  /**
220
220
  * 子元素选择器
221
221
  */