ui-event-observer

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.

• 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:

• yahoo/subscribe-ui-event: subscribe-ui-event provides an cross-browser and performant way to subscribe to browser UI Events.

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

• 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

• 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

• github/azu
• twitter/azu_re

License

MIT © azu