vanilla-delegation

    5.5.0 • Public • Published

    Vanilla-delegation - npm version

    Build Status David GitHub file size in bytes NPM

    Light vanilla event delegation.

    Extras


    🔧 How to install

    Install from npm and require it in your script.

    $ npm install vanilla-delegation --save
    
    require('vanilla-delegation');

    or import the script in your html document:

    <script rel="https://unpkg.com/vanilla-delegation/dist/vanilla-delegation.min.js" />

    ✏️ How to use

    The script implements new methods on Element, NodeList and HTMLCollection.

    // Add
    Element.addDelegateListener(eventType, selector, handler, useCapture = false)
    NodeList.addDelegateListener(eventType, selector, handler, useCapture = false)
    HTMLCollection.addDelegateListener(eventType, selector, handler, useCapture = false)
     
    // Remove
    Element.removeDelegateListener(eventType, selector, handler, useCapture = false)
    • eventType: [string] A case-sensitive string representing the event type to listen for.
    • selector: [string] css child selector, must be a child of Element.
    • handler: [function] callback function, original event obj is passed as argument (more details here).
      Be sure to pass a named function so you can remove it with removeDelegateListener() if needed. Be aware in case you're using a minifier like uglify-js be sure to set keep_fnames: true in your uglifyOptions (more details here)
    • useCapture: [boolean] native useCapture parameter (default false). See here for more details.

    ➕ Add listener

    // get single element
    const body = document.querySelector('body');
     
    // bind listener with delegation
    body.addDelegateListener('click', 'a', function handlerFn(event) {
        event.preventDefault();
        alert('link clicked!');
    });

    Also can be used with querySelectorAll, getElementsByClassName, getElementsByTagName, getElementsByTagNameNS

    // get multiple elements
    const div = document.querySelectorAll('div');
     
    // bind listener with delegation on every element in NodeList (or HTMLCollection)
    div.addDelegateListener('click', 'a', function handlerFn(event) {
        event.preventDefault();
        alert('link clicked!');
    });

    ➖ Remove listener

    In order to remove a listener be sure to pass a named function to removeDelegateListener()

    const div = document.querySelector('div');
    div.removeDelegateListener('click', 'a', handlerFn);

    removeDelegateListener() can be used on single Element nodes only

    Handler function

    Event is passed to handler function as argument.

    this is the element matching selector.

    event.delegateTarget is the Element to which the event was originally attached (jQuery-like)


    Global polyfill (IE9+ support)

    A global polyfill is included by default with vanilla-delegation:

    See https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill

    Support

    • (latest 2 versions)
    • IE 11

    Install

    npm i vanilla-delegation

    DownloadsWeekly Downloads

    17

    Version

    5.5.0

    License

    MIT

    Unpacked Size

    42.5 kB

    Total Files

    23

    Last publish

    Collaborators

    • matriz