mirror of
https://codeberg.org/vlw/elevent.git
synced 2025-09-13 16:23:40 +02:00
Victor Westerlund
68116c3b09
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>
63 lines
No EOL
1.6 KiB
Markdown
63 lines
No EOL
1.6 KiB
Markdown
# Elevent
|
|
|
|
Create callback functions for any [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) dispatched on HTML elements.
|
|
|
|
```js
|
|
import { Elevent } from "https://cdn.jsdelivr.net/npm/elevent/src/Elevent.mjs"
|
|
|
|
new Elevent("click", document.querySelector("#myButton"), () => console.log("Button clicked!")); // console: "Button clicked"
|
|
```
|
|
|
|
# Examples
|
|
|
|
## Bind from a NodeList
|
|
```js
|
|
new Elevent("click", document.querySelectorAll("button"), (event) => console.log(event)); // console: PointerEvent
|
|
```
|
|
|
|
## Bind with a CSS selector
|
|
```js
|
|
// Bind all elements that match the CSS selector string
|
|
new Elevent("click", ".css-selector", (event, elevent) => console.log(event, elevent)) // console: PointerEvent, Elevent
|
|
```
|
|
> New elements added to the DOM with a matching CSS selector will bind automatically
|
|
|
|
## Remove event listeners
|
|
```js
|
|
const elevent = new Elevent("click", null, () => {}); // Empty Elevent instance
|
|
|
|
elevent.remove(document.querySelector("#specialButton")); // Remove a specific HTMLElement if bound
|
|
elevent.remove(); // Remove ALL currently bound elements
|
|
```
|
|
|
|
## Bind a specific element
|
|
```js
|
|
const elevent = new Elevent("click", null, () => {}); // Empty Elevent instance
|
|
|
|
elevent.bind(document.querySelector("#bindMe"));
|
|
```
|
|
|
|
# Description
|
|
|
|
### `Elevent.constructor`
|
|
```ts
|
|
Elevent.constructor(
|
|
eventType: string | null
|
|
target: NodeList | HTMLElement | string | null,
|
|
callback: CallableFunction
|
|
)
|
|
```
|
|
|
|
### `this.bind()`
|
|
```ts
|
|
this.bind(
|
|
target: HTMLElement
|
|
)
|
|
```
|
|
|
|
### `this.remove()`
|
|
```ts
|
|
this.remove(
|
|
target?: HTMLElement
|
|
)
|
|
``` |