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, delegate, dispatch } 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
);

delegate()

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

Registers a listener for the event type on target with options that processes events from descendant elements of target matching the specified selector.

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

Example

const listener = function () {
    console.log('My Button clicked');
};
const options = {
    passive: true
};

const remove = delegate(
    document, // Listen on document
    'click',
    '.my-button',
    listener,
    options
);

remove(); // Remove event listener

dispatch()

dispatch(target: EventTarget, type: string[, eventInit: CustomEventInit]): function

Dispatches a CustomEvent type at the specified target optionally using the eventInit options.

Example

dispatch(document, 'click');

dispatch(
    document.querySelector('.my-button'),
    'my:event',
    {
        bubbles: true,
        cancelable: true,
        detail: {
            foo: 'bar'
        }
    }
);

License

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