Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benqus/doxxy
DOM Event Proxy - channel all bubbling events via a proxy listener to controller methods.
https://github.com/benqus/doxxy
bubbling-events dom event-listener event-listeners events javascript proxy proxy-listener user-interface
Last synced: about 1 month ago
JSON representation
DOM Event Proxy - channel all bubbling events via a proxy listener to controller methods.
- Host: GitHub
- URL: https://github.com/benqus/doxxy
- Owner: benqus
- License: mit
- Created: 2019-11-05T00:39:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T11:24:58.000Z (about 2 years ago)
- Last Synced: 2024-12-11T13:51:12.106Z (about 1 month ago)
- Topics: bubbling-events, dom, event-listener, event-listeners, events, javascript, proxy, proxy-listener, user-interface
- Language: JavaScript
- Size: 1.97 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Doxxy
===
DOM Event Proxy - channel all bubbling events via a proxy listener to controller methods.
Doxxy is a minimalistic, dependency-free tool that allows the markup to change without the event listeners being bound to either the markup or the global context.
This allows more flexibility between user-actions and page rerenders/reflows regardless whether the markup is rendered on the server or the client side.
Consider this basic example:
```html
Click me!
```
```js
//js - Controller
function onclick() {
alert('Hello world!')
}
```
In this case the `onclick` handler is created on and referenced from the global context (`Window`), polluting the global namespace.
With Doxxy, the event listeners are soft-referenced and live in their scope of declaration.
Adding listeners with Doxxy:
```html
Click me!
```
Script
```js
dx.action('click', e => alert('Hello world!'));
```
This way multiple UI control elements can be channelled through the same event listener.
Doxxy does not conflict with existing frameworks as it is using `data-event:[type]` attribute and does not rely on other dependencies or frameworks.
> *Current development target:* latest browsers
Usage
---
### Setup
```js
import doxxy from 'doxxy';
// initialise a Doxxy on a Node
const dx = doxxy();
```
### Configuration
By default doxxy automatically subscribes the proxy listener to **all** events that bubble up to the `document`` Node.
You can subscribe to a custom Node with custom events
```js
const node = document.createElement('video'); // optional
const events = [ 'canplay', 'timeupdate', 'ended' ]; // optional
const vx = doxxy({ node, events });
```
### Adding user actions
User actions can be either functions or objects grouping together user actions within the same topic
User action as a `function`:
```js
dx.action('hello', e => alert("Hello World!"));
```
User actions as an `object`:
```js
const start = (e) => e.dataTransfer.setData('text/plain', 'hakuna matata');
dx.action('drag', { start });
```
### Proxy/route events to user actions
Event declaration in the markup's data attribute.
Concept: __Event__ (such as `click`) >> __User Action__ (any predefined user action)
Example
```html
Hello World!
```
Or
```html
```
### Adding parameters to user actions
In the attribute value: `[action]:[param]`
```html
```
Or use doxxy attribute generator
```js
const attr = dx.attribute('click', 'showItem', 0);
const html = `
```
### Unbinding Doxxy
```js
dx.unbind();
```