Provide performant way to subscribe to browser UI Events.
JavaScript HTML
Latest commit 635c95a Nov 25, 2016 @azu Update docs

README.md

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
const eventObserver = require("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:

const UIEventObserver = require("ui-event-observer").UIEventObserver

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

  • target: Object - target Element Node
  • eventName: string - event name
  • handler: Function - event handler

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

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