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 - View -->Click me!
//js - Controller { }
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:
Click me!
Script
dxaction'click' ;
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
; // initialise a Doxxy on a Nodeconst dx = ;
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
const node = document; // optionalconst events = 'canplay' 'timeupdate' 'ended' ; // optionalconst vx = ;
Adding user actions
User actions can be either functions or objects grouping together user actions within the same topic
User action as a function
:
dxaction'hello' ;
User actions as an object
:
const start = edataTransfer;dxaction'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
Hello World!
Or
Adding parameters to user actions
In the attribute value: [action]:[param]
Or use doxxy attribute generator
const attr = dx;const html = `<li ></li>`;
Unbinding Doxxy
dx;