mirror of
https://codeberg.org/vlw/elevent.git
synced 2025-09-13 16:23:40 +02:00
doc: add "neat stuff" example to README
This commit is contained in:
parent
7f91b8717c
commit
f6729d3746
1 changed files with 16 additions and 5 deletions
21
README.md
21
README.md
|
@ -12,31 +12,42 @@ new Elevent("click", document.querySelector("#myButton"), () => console.log("But
|
||||||
|
|
||||||
## Bind from a NodeList
|
## 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<Event>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Bind with a CSS selector
|
## Bind with a CSS selector
|
||||||
```js
|
```js
|
||||||
// Bind all elements that match the CSS selector string
|
// 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
|
> New elements added to the DOM with a matching CSS selector will bind automatically
|
||||||
|
|
||||||
## Remove event listeners
|
## Remove event listeners
|
||||||
```js
|
```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
|
elevent.remove(); // Remove ALL currently bound elements
|
||||||
```
|
```
|
||||||
|
|
||||||
## Bind a specific element
|
## Bind a specific element
|
||||||
```js
|
```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"));
|
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
|
# Description
|
||||||
|
|
||||||
### `Elevent.constructor`
|
### `Elevent.constructor`
|
||||||
|
|
Loading…
Add table
Reference in a new issue