dom-event-store

About

Store DOM event listeners and clear them with a single command.

Useful for native JavaScript web component development whereby multiple event listeners may be added by the component that need removing when the component is disposed of to avoid memory leaks e.g. in single page applications.

Event listeners are also automatically bound to the context passed to the constructor, so no need for handler.bind(this).

Install

$ npm install --save dom-event-store

Methods

/**
 * Adds an event listener to the target DOM element
 */
add(target, type, listener, useCapture, alias);
 
/**
 * Removes an aliased event listener
 */
remove(alias);
 
/**
 * Removes all event listeners
 */
clear();

Example usage with a simple web component

import DOMEventStore from 'dom-event-store';
 
class SimpleComponent {
    constructor(target, state) {
        this.target = target;
        this.state = state;
        this.eventStore = new DOMEventStore(this);
        this.render();
    }
 
    render() {
        // this example just adds a single event listener, in practice you may have many
        let button = document.createElement('button');
        button.textContent = 'click me';
        this.eventStore.add(button, 'click', () => {
            console.log('button was clicked');
        });
        this.target.appendChild(button);
    }
 
    dispose() {
        // remove all registered event listeners
        this.eventStore.clear();
    }
}
 
export default SimpleComponent;

License

MIT © Tony Leeper