doc: add "neat stuff" example to README

This commit is contained in:
Victor Westerlund 2024-12-04 08:45:50 +00:00
parent 7f91b8717c
commit f6729d3746

View file

@ -12,31 +12,42 @@ new Elevent("click", document.querySelector("#myButton"), () => console.log("But
## Bind from a NodeList
```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<Event>
```
## 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 Elevent("click", ".css-selector", (event, elevent) => console.log(event, elevent)) // console: PointerEvent<Event>, Elevent<class>
```
> 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
const elevent = new Elevent("click", null, () => {}); // Empty Elevent<class> instance
elevent.remove(document.querySelector("#specialButton")); // Remove a specific HTMLElement if bound
elevent.remove(document.querySelector("#specialButton")); // Remove a specific HTMLElement<object> if bound
elevent.remove(); // Remove ALL currently bound elements
```
## Bind a specific element
```js
const elevent = new Elevent("click", null, () => {}); // Empty Elevent instance
const elevent = new Elevent("click", null, () => {}); // Empty Elevent<class> instance
elevent.bind(document.querySelector("#bindMe"));
```
# Neat stuff
## Create a [`once`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once) event
```js
// As a variable
const elevent = new Elevent("click", null, () => elevent.remove());
// Anonymous function second argument
new Elevent("click", null, (event, elevent) => elevent.remove()); // PointerEvent<Event>, Elevent<class>
```
# Description
### `Elevent.constructor`