dom-event-helpers

dom-event-helpers

A super tiny DOM event helper library.

Installation

npm install dom-event-helpers

Note: This library is written as ES2015 code and published as such to npm. That means, code from dom-event-helpers must not be excluded from compilation.

If you're using webpack and babel, that could look like:

{
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules\/(?!dom-event-helpers)/,
                loader: 'babel-loader'
            }
        ]
    }
}

Usage

import { ready, on, off } from 'dom-event-helpers';

ready()

ready(listener: function): void

Registers a listener to be called once the DOM is ready.

Unlike DOMContentLoaded, this also works when called after the DOM was loaded.

Example

ready(function () {
    console.log('DOM is ready!');
});

on()

on(target: EventTarget, type: string, listener: EventListener[, options: object]): function

Registers a listener for the event type on target with options.

options is always an object that specifies characteristics about the event listener, see https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener.

If one of the options isn't supported by the browser, the behavior is as follows:

• capture: Always supported.
• once: Will be polyfilled.
• passive: Will be ignored.

The function returns another function which can be used to unregister the event listener.

Example

const target = document.querySelector('.my-button');
const listener = function () {
    console.log('My Button clicked');
};
const options = {
    once: true
};

const remove = on(
    target, 
    'click',
    listener,
    options
);

remove(); // Remove event listener

off()

off(target: EventTarget, type: string, listener: EventListener[, options: object]): void

Removes a listener previously registered via on().

Example

off(
    target, 
    'click',
    listener,
    options
);

License

Copyright (c) 2018 Jan Sorgalla. Released under the MIT license.