vlw/elevent
1
0
Fork 0
mirror of https://codeberg.org/vlw/elevent.git synced 2025-09-13 16:23:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace HTMLCollection with NodeList (#1)

Browse source 
I had some weird notion that `querySelectorAll` would return an `HTMLCollection` and not a `NodeList`.

```js
[...document.querySelectorAll()].forEach(element => {});
```
> Maybe I was doing this for no reason before, since `NodeList` already inherits the Array `forEach()` method...

Reviewed-on: https://codeberg.org/vlw/elevent/pulls/1
Co-authored-by: Victor Westerlund <victor.vesterlund@gmail.com>
Co-committed-by: Victor Westerlund <victor.vesterlund@gmail.com>
This commit is contained in:
Victor Westerlund 2024-09-13 11:49:15 +00:00 • committed by Victor Westerlund
parent fb2b376921
commit 68116c3b09
2 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

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

16
src/Elevent.mjs
View file

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