ui-event-observer

Provide performant way to subscribe to browser UI Events.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ui-event-observer
6212.0.05 years ago6 years agoMinified + gzip package size for ui-event-observer in KB

Readme

ui-event-observer Build Status
Provide performant/simple way to subscribe to browser DOM UI Events.
You can use a single addEventListener instead of multiple addEventListener for DOM UI Events by UIEventObserver.
Example project show that add 100 "scroll" event handler to window.
addEventListener vs, UIEventObserver
  • Left: 100x addEventListener
  • Right: 1 UIEventObserver

Features

  • Provide Observer for addEventListener
- With UIEventObserver, instead of calling multiple window.addEventListener('scroll', eventHandler) by different components, call subscribe(window, 'scroll', eventHandler). - It will only add a single event listener and dispatch event to those who subscribe the event via EventEmitter.
  • Lightweight: 5kb(gzip)

Related library:

Install

Install with npm:
npm install ui-event-observer

Example

// singleton
import { eventObserver } from "ui-event-observer";
const handler = (event) => {
    // do something
};
// subscribe "scroll" event
eventObserver.subscribe(window, "scroll", handler);
// fire by interaction
const event = new Event("scroll");
window.dispatchEvent(event);
// unsubscribe
eventObserver.unsubscribe(window, "scroll", handler);
// unsubscribe all
eventObserver.unsubscribeAll();

You can also use UIEventObserver class:
import { UIEventObserver } from "ui-event-observer";

Usage

UIEventObserver

UIEventObserver class provide performant/simple way to subscribe to browser DOM UI Events.

subscribe(target: Object, eventName: string, handler: Function): Function

registers the specified handler on the target element it's called eventName.
Parameters

Returns: Function - unsubscribe handler

subscribeOnce(target: Object, eventName: string, handler: Function): Function

registers the specified handler on the target element it's called eventName. It is called at once difference from UIEventObserver#subscribe
Parameters
  • target: Object - target Element Node
  • eventName:
string - event name
  • handler:
  • Function - event handler
    Returns: Function - unsubscribe handler

    unsubscribe(target: Object, eventName: string, handler: Function)

    removes the event handler previously registered with UIEventObserver#subscribe
    Parameters
    • target: Object - target Element Node
    • eventName:
    string - event name
  • handler:
  • Function - event handler

    unsubscribeAll()

    unsubscribe all events with DOM Event

    hasSubscriber(targetElement: Object, domEventName: string): boolean

    if has a subscriber at least one, return true
    Parameters
    • targetElement: Object
    • domEventName:
    string
    Returns: boolean

    Changelog

    See Releases page
    .

    Running tests

    Install devDependencies and Run npm test:
    npm i -d && npm test

    Contributing

    Pull requests and stars are always welcome.
    For bugs and feature requests, please create an issue.
    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    Author

    License

    MIT © azu