fix: replace HTMLCollection with NodeList

This commit is contained in:
Victor Westerlund 2024-09-13 13:43:08 +02:00
parent fb2b376921
commit 7ef7b05cd8
2 changed files with 10 additions and 10 deletions

View file

@ -10,7 +10,7 @@ new Elevent("click", document.querySelector("#myButton"), () => console.log("But
# Examples
## Bind from an HTMLCollection
## Bind from a NodeList
```js
new Elevent("click", document.querySelectorAll("button"), (event) => console.log(event)); // console: PointerEvent
```
@ -43,7 +43,7 @@ elevent.bind(document.querySelector("#bindMe"));
```ts
Elevent.constructor(
eventType: string | null
target: HTMLCollection | HTMLElement | string | null,
target: NodeList | HTMLElement | string | null,
callback: CallableFunction
)
```

View file

@ -10,7 +10,7 @@ export class Elevent {
/**
* Create a new Elevent instance.
* @param {string|null} eventType
* @param {HTMLCollection|HTMLElement|string|null} target Strings will be treated as CSS selectors, null will create a template instance
* @param {NodeList|HTMLElement|string|null} target Strings will be treated as CSS selectors, null will create a template instance
* @param {function} callback
*/
constructor(eventType = null, target = null, callback) {
@ -19,13 +19,13 @@ export class Elevent {
if (target) {
switch (target.constructor) {
case HTMLCollection:
this.#bindHTMLCollection(target);
case NodeList:
this.#bindNodeList(target);
break;
case String:
this._selector = target;
this.#bindHTMLCollection(document.querySelectorAll(target));
this.#bindNodeList(document.querySelectorAll(target));
// Automatically bind new DOM elements that match the provided CSS selector string
this._observer.observe(document.body, {
@ -57,11 +57,11 @@ export class Elevent {
}
/**
* Bind all HTMLElements inside an HTMLCollection
* @param {HTMLCollection} collection
* Bind all HTMLElements inside a NodeList
* @param {NodeList} nodeList
*/
#bindHTMLCollection(collection) {
[...collection].forEach(element => this.bind(element));
#bindNodeList(nodeList) {
nodeList.forEach(element => this.bind(element));
}
/**