one-listener v0.5.1

one-listener

big project?
many contributors?

too many event listeners on window?

This library aims to gather all handlers in one listener. This way the number of listeners are reduced.
Performance intense listeners are wrapped in a requestAnimationFrame.
If a certain limit of handlers is reached events will be throttled. Everything is configurable. You can even create your own module and lock certain features.

available listeners

• scroll
• resize
• mousewheel
• mousemove
• mouseup (default behavior)
• touchmove
• touchend (default behavior)

API

A detailed documentation can be found here
You can also take a look at the examples

Pride

installation

npm install one-listener

Examples

Look at the examples folder for a detailed example

simple

import OneListener from 'one-listener';

const one = new OneListener({
    limit: 6,
    throttle: 200
});
const {requestEventListener, cancelEventListener} = one;

API

import OneListener from 'one-listener';
const one = new OneListener()
const {requestEventListener, cancelEventListener} = one;


// request mousemove 
const stopMoveTracking = requestEventListener('mousemove', (e) => {
    console.log({
        x: e.pageX,
        y: e.pageY
    });
});

// request scroll
// and cancel mousemove on condition 
const trackScroll = (e) => {
    console.log(window.scrollY);
    if (window.scrollY > 100) {
        stopMoveTracking();
    }
};

requestEventListener('scroll', trackScroll);

// remove scroll tracking after 5 seconds
setTimeout(() => {
    cancelEventListener('scroll', trackScroll);
}, 5000);

Setters

import OneListener from 'one-listener';

const one = new OneListener();
one.limit = 20
one.throttle = 200

Getters

import OneListener from 'one-listener';

const one = new OneListener();
console.log(one.limit);
console.log(one.throttle);
console.log(one.debug);

locked instances

import OneListener from 'one-listener';

// create locked instances (listeners.js)
const o = new OneListener({
    limit: 6,
    throttle: 200
});
const n = new OneListener({
    limit: Infinity
});
const a = new OneListener({
    limit: 0,
    throttle: 100
});

export const one = {
  requestEventListener: o.requestEventListener,
  cancelEventListener: o.cancelEventListener
}
export const always = {
  requestEventListener: a.requestEventListener,
  cancelEventListener: a.cancelEventListener
}
export const never = {
  requestEventListener: n.requestEventListener,
  cancelEventListener: n.cancelEventListener
}


// then import (somefile.js)

import {one,never,always} from './listeners';
const {requestEventListener, cancelEventListener} = one;

//requestEventListener() || one.requestEventListener()
//always.requestEventListener()
//never.requestEventListener()