Negotiable Paleobotanist Missions

    vent-dom

    0.1.3 • Public • Published

    Vent

    img logo

    Extremely lightweight (1.5Kb) jQuery inspired events library for the browser.

    vent('a:first-child').on('click', (e) => {
        // do something
    });
    vent('a').add('button').off('click');
     
    vent(window).trigger('scroll');

    Installation

    You can either include vent's source as a script tag on your page, or:

    npm i --save vent-dom
    

    Or:

    <script src="http://cdn.jsdelivr.net/npm/vent-dom@0.1.2/lib/vent.min.js"></script>
    

    A note on ES5 support

    This library by default does not support ES5 syntax, but it does produce an es5 bundle for those who still need es5 support. To use it, either require, or use itas a script tag.

    <script src="http://cdn.jsdelivr.net/npm/vent-dom@0.1.2/lib/vent.min.es5.js"></script>
    

    Or:

    require('vent-dom/lib/vent.min.es5.js');
    

    Getting the $

    By default vent does not assign itself to $, in many cases you may already have jQuery on your page - sometimes simply because a 3rd party brought it in, and I don't want to cause any collisions. To use vent with $, simply add this to your code (after embedding vent, of course):

    window.$ = vent;
     
    $('button').trigger('click');

    If you want to stay pretty safe and still use a shorthand, v works well too:

    window.v = vent;
     
    v(window).on('scroll', () => {
        console.log('Weeeeeee!')
    });

    Mission

    Even today, when jQuery is mostly unneeded due to the facts that most browsers are more or less standard compliant, jQuery’s api for dealing with DOM events is hands down the best.

    It offers easy event delegation, removing listeners is as simple as .off, it handles custom events and more. The only problem with jQuery is that it is huge (over 200kb), and mostly unneeded. Vent tries to provide all that goodness with just 1.5Kb.

    Welcome Vent.

    Vent was written with jQuery in mind. It doesn’t support all of jQuery’s goodness, but it does maintain all the best parts.

    What Vent isn't?

    • Vent is NOT jQuery. It is not a 100% jQuery compliant, but it does cover 95% of the use-cases handled by jQuery.
    • Vent is not backwards compatible. It works across all evergreen browsers (Chrome, FF, Safari, Edge..). If for some reason you want your stuff to work on ie10 and below, please, use jQuery.
    • Vent is not a DOM manipulation library.

    Vent's API

    • vent(selector): Most basic usage. Add elements to the set of elements.
    vent(window)
    vent('a')
    vent('body')
    vent(document.body)
    • .on(events, handler): Registers a single or multiple events on the matched selectors. It also handles delegations via selectors passed as the second argument.
    // regular usage
    vent('li').on('click', (e) => {
        console.log('clicked!');
    });
     
    // multiple event matching
    vent('li').on('click mouseenter', (e) => {
        console.log(e.type);
    });
     
    // event delegation
    vent('ul').on('click', 'li:first-child', (e) => {
        console.log('clicked!');
    });
     
    // custom event matching
    vent('li').on('sample-event', (e) => {
        console.log('custom event');
    });
    • .off(events): Unregisters events handlers bound using .on. When no events passed
    • .off(events, handler): Unregisters events handlers bound using .on. When no events passed
    vent('a').off('click'); // unregisters all click events bound using 'on()'
    vent('a').off('click mouseenter'); // unregisters all click and mouseenter events bound using 'on()'
    vent('a').off(); // unregisters all events bound using 'on()'
    vent('a').off('click', myHandler); // unregisters all events that were created with a specific handler function.
    • .once(events, delegatedTarget, handler): exactly like .on, but gets triggered only once. Does not respect .off!
    vent('a').once('click', () => {
        console.log('this will only happen once');
    });
    • .trigger(event, { data, options }): Triggers an event. Accepts data and custom options. By default triggered events get bubbles: true (can be overridden with custom options). Note: if the triggered event is a function on the element (such as click, focus, etc...), the function itself will be called along with dispatching an event.

    Custom data will appear under detail property of the event.

    // regular use
    vent('a').trigger('click'); // will click the element
    vent('a').trigger('mouseenter'); // will dispatch `mouseenter` event.
     
    // with data
    vent('a').trigger('click', {data: 'custom data'}); // will dispatch `click` with custom data (not call the function)
     
    vent('a').trigger('sample', {options: {bubbles: false}});
    • .add(selector): extends Vent set with more elements
    const v = vent('a');
    v.add(window);
    v.add('li');
     
    v.on('scroll') // will be triggered for `a`, `window`, `li`.

    Icon made by hirschwolf from www.flaticon.com.

    Keywords

    none

    Install

    npm i vent-dom

    DownloadsWeekly Downloads

    20

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    47.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • ealush