doc: add README

This commit is contained in:
Victor Westerlund 2024-09-13 09:16:29 +00:00
parent ed98dcfec3
commit fb2b376921

View file

@ -1,3 +1,63 @@
# cursor
# Elevent
Cursor is a front-end JavaScript abstraction library for running custom
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 an HTMLCollection
```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: HTMLCollection | HTMLElement | string | null,
callback: CallableFunction
)
```
### `this.bind()`
```ts
this.bind(
target: HTMLElement
)
```
### `this.remove()`
```ts
this.remove(
target?: HTMLElement
)
```