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.

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

- 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

``js
// 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:

`js
import { UIEventObserver } from "ui-event-observer";
`

Usage

$3

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