diff --git a/delegate.test.ts b/delegate.test.ts index 58f808a..31cdba5 100644 --- a/delegate.test.ts +++ b/delegate.test.ts @@ -34,81 +34,6 @@ test('should not add an event listener of the controller has already aborted', ( expect(spy).toHaveBeenCalledTimes(0); }); -test('should add event listeners to all the elements in a base selector', () => { - const spy = vi.fn(); - delegate('li', 'a', 'click', spy); - - const anchors = document.querySelectorAll('a'); - anchors[0].click(); - anchors[1].click(); - expect(spy).toHaveBeenCalledTimes(2); -}); - -test('should remove the event listeners from all the elements in a base selector', () => { - const spy = vi.fn(); - const controller = new AbortController(); - delegate('li', 'a', 'click', spy, {signal: controller.signal}); - controller.abort(); - - for (const anchor of document.querySelectorAll('a')) { - anchor.click(); - } - - expect(spy).toHaveBeenCalledTimes(0); -}); - -test('should pass an AbortSignal to the event listeners on all the elements in a base selector', () => { - const spy = vi.fn(); - const controller = new AbortController(); - delegate('li', 'a', 'click', spy, {signal: controller.signal}); - controller.abort(); - - for (const anchor of document.querySelectorAll('a')) { - anchor.click(); - } - - expect(spy).toHaveBeenCalledTimes(0); -}); - -test('should add event listeners to all the elements in a base array', () => { - const spy = vi.fn(); - const items = document.querySelectorAll('li'); - delegate(items, 'a', 'click', spy); - - const anchors = document.querySelectorAll('a'); - anchors[0].click(); - anchors[1].click(); - expect(spy).toHaveBeenCalledTimes(2); -}); - -test('should remove the event listeners from all the elements in a base array', () => { - const spy = vi.fn(); - const items = document.querySelectorAll('li'); - const controller = new AbortController(); - delegate(items, 'a', 'click', spy, {signal: controller.signal}); - controller.abort(); - - for (const anchor of document.querySelectorAll('a')) { - anchor.click(); - } - - expect(spy).toHaveBeenCalledTimes(0); -}); - -test('should pass an AbortSignal to the event listeners on all the elements in a base array', () => { - const spy = vi.fn(); - const items = document.querySelectorAll('li'); - const controller = new AbortController(); - delegate(items, 'a', 'click', spy, {signal: controller.signal}); - controller.abort(); - - for (const anchor of document.querySelectorAll('a')) { - anchor.click(); - } - - expect(spy).toHaveBeenCalledTimes(0); -}); - test('should not fire when the selector matches an ancestor of the base element', () => { const spy = vi.fn(); delegate(container, 'body', 'click', spy); diff --git a/delegate.ts b/delegate.ts index 0c2e2e1..4c843c2 100644 --- a/delegate.ts +++ b/delegate.ts @@ -29,7 +29,7 @@ WeakMap> function editLedger( wanted: boolean, - baseElement: EventTarget | Document, + baseElement: EventTarget, callback: DelegateEventHandler, setup: string, ): boolean { @@ -55,12 +55,6 @@ function editLedger( return existed && wanted; } -function isEventTarget( - elements: EventTarget | Document | Iterable | string, -): elements is EventTarget { - return typeof (elements as EventTarget).addEventListener === 'function'; -} - function safeClosest(event: Event, selector: string): Element | void { let target = event.target; if (target instanceof Text) { @@ -85,7 +79,7 @@ function delegate< TElement extends Element = ParseSelector, TEventType extends EventType = EventType, >( - base: EventTarget | Document | Iterable | string, + base: EventTarget, selector: Selector, type: TEventType, callback: DelegateEventHandler, @@ -96,7 +90,7 @@ function delegate< TElement extends Element = HTMLElement, TEventType extends EventType = EventType, >( - base: EventTarget | Document | Iterable | string, + base: EventTarget, selector: string, type: TEventType, callback: DelegateEventHandler, @@ -108,7 +102,7 @@ function delegate< TElement extends Element, TEventType extends EventType = EventType, >( - base: EventTarget | Document | Iterable | string, + base: EventTarget, selector: string, type: TEventType, callback: DelegateEventHandler, @@ -122,20 +116,6 @@ function delegate< return; } - // Handle Selector-based usage - if (typeof base === 'string') { - base = document.querySelectorAll(base); - } - - // Handle Array-like based usage - if (!isEventTarget(base)) { - for (const element of base) { - delegate(element, selector, type, callback, listenerOptions); - } - - return; - } - // Don't pass `once` to `addEventListener` because it needs to be handled in `delegate-it` const {once, ...nativeListenerOptions} = listenerOptions; diff --git a/one-event.ts b/one-event.ts index 4603a5a..ba6fa4a 100644 --- a/one-event.ts +++ b/one-event.ts @@ -14,7 +14,7 @@ async function oneEvent< TElement extends Element = ParseSelector, TEventType extends EventType = EventType, >( - base: EventTarget | Document | Iterable | string, + base: EventTarget, selector: Selector, type: TEventType, options?: DelegateOptions @@ -24,7 +24,7 @@ async function oneEvent< TElement extends Element = HTMLElement, TEventType extends EventType = EventType, >( - base: EventTarget | Document | Iterable | string, + base: EventTarget, selector: string, type: TEventType, options?: DelegateOptions @@ -35,7 +35,7 @@ async function oneEvent< TElement extends Element, TEventType extends EventType = EventType, >( - base: EventTarget | Document | Iterable | string, + base: EventTarget, selector: string, type: TEventType, options?: DelegateOptions, diff --git a/readme.md b/readme.md index 867bd54..a1e9a28 100644 --- a/readme.md +++ b/readme.md @@ -32,23 +32,7 @@ import delegate from 'delegate-it'; #### With an element as base ```js -delegate(document.body, '.btn', 'click', event => { - console.log(event.delegateTarget); -}); -``` - -#### With a selector (of existing elements) as base - -```js -delegate('.container', '.btn', 'click', event => { - console.log(event.delegateTarget); -}); -``` - -#### With an array/array-like of elements as base - -```js -delegate(document.querySelectorAll('.container'), '.btn', 'click', event => { +delegate(document, '.btn', 'click', event => { console.log(event.delegateTarget); }); ``` @@ -56,12 +40,12 @@ delegate(document.querySelectorAll('.container'), '.btn', 'click', event => { #### With listener options ```js -delegate(document.body, '.btn', 'click', event => { +delegate(document, '.btn', 'click', event => { console.log(event.delegateTarget); }, true); // Or equivalent: -delegate(document.body, '.btn', 'click', event => { +delegate(document, '.btn', 'click', event => { console.log(event.delegateTarget); }, { capture: true @@ -72,7 +56,7 @@ delegate(document.body, '.btn', 'click', event => { ```js const controller = new AbortController(); -delegate(document.body, '.btn', 'click', event => { +delegate(document, '.btn', 'click', event => { console.log(event.delegateTarget); }, { signal: controller.signal, @@ -84,7 +68,7 @@ controller.abort(); #### Listen to one event only ```js -delegate(document.body, '.btn', 'click', event => { +delegate(document, '.btn', 'click', event => { console.log('This will only be called once'); }, { once: true @@ -96,7 +80,7 @@ delegate(document.body, '.btn', 'click', event => { ```js import {oneEvent} from 'delegate-it'; -await oneEvent(document.body, '.btn', 'click'); +await oneEvent(document, '.btn', 'click'); console.log('The body was clicked'); ```