Subvent is a small javascript library for defining and managing event subscriptions in an intuitive and practical way. The human friendly way.
If You're wondering what's wrong with the way DOM handles event listeners currently, I wrote about it in another post, now we'll focus on the solution. Let's get to the code:
Let's include the library first in the head of our HTML document:
<script src="https://unpkg.com/subvent@1.1.0/dist/iife/subvent.js"></script>
Getting the DOM Nodes (elements) we're going to use
throughout this article:
const el1 = document.getElementById('element-1');
const el2 = // ...
const el3 = // ...
const el4 = // ...
Define the event subscription:
const evtSub1 = new Subvent(el1, 'click', () => {...});
- creates an instance of Subvent
- the instance represents an event subscription
The shorthand on function is also available:
const evtSub2 = on(el2, 'click', () => {...});
If preferred, use an object to pass parameters:
const evtSub3 = on({node: el3, name: 'click', handler: () => {...}});
Manage the subscription
Unmount it:
evtSub1.unmount();
evtSub1.isMounted; // false
Mount it:
evtSub1.mount();
evtSub1.isMounted; // true
Update it:
evtSub2.update({name: 'dblclick'});
- takes care of mounting and unmounting for us
- only changes the specifed arguments, retaining previous parameters.
Duplicate it:
const evtSub4 = evtSub3.duplicate({node: el4})
- uses Subvent's instance as a template for creating a new instance
- instance being duplicated provides fallback values for undefined parameters
About the library
The library works by gathering all the related variables of the event listener into a subscription object, an instance of Subvent class. This instance holds all the relevant properties: (node, name, handler, options, thisArg and isMounted), and all the methods (mount, unmount, update and duplicate). Very usefull stuff.
Subvent also error-checks all the parameters by value and type, and provides warnings.
To start using Subvent head on over to it's repository here:
Subvent
Create event subscriptions in DOM. Manage them with update, unmount and mount methods.
Abstracts DOM's addEventListener, and removeEventListener methods into a subscription object.
Installation
In node projects:
npm install --save subvent
import {Subvent} from 'subvent'
// or use the shorthand:
import {on} from 'subvent'In browsers:
<head>
<script src="https://unpkg.com/subvent@latest/dist/iife/subvent.js"></script>
</head>Usage
Get the DOM nodes first:
const el1 = document.getElementById('element-1');
const el2 = // ...
const el3 = // ...
const el4 = // ...Define the event subscription
const evtSub1 = new Subvent(el1, 'click', () => {...});- creates an instance of Subvent
- the instance represents an event subscription
The shorthand on function is also available:
const evtSub2 = on(el2, 'click', (…Feedback is welcome
If You have an opinion, or and idea on how to improve it, feel free to share it with us, or contact me directly.
Thank You
Top comments (0)