diff --git a/README.md b/README.md index d151930..8d56753 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,63 @@ -# cursor +# Elevent -Cursor is a front-end JavaScript abstraction library for running custom \ No newline at end of file +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 +) +``` \ No newline at end of file