loading...

Subvent.js: Managing event subscriptions in DOM

filibit profile image Filip Biterski Updated on ・2 min read

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:

GitHub logo filiBit / subvent

Define and manage DOM Event subscriptions

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

Posted on by:

filibit profile

Filip Biterski

@filibit

Frontend developer experimenting with javascript in free time.

Discussion

pic
Editor guide