Event Bridge

Object for cross-browser working with events using bridge pattern.

This is a simple interface for adding and removing event listeners. Unfortunately, Internet Explorer 9 and older uses non-standard methods to do that.

You should use Event polyfill if you want the full functionality with native syntax.

How to use

Install the library via NPM:

npm install event-bridge --save

Then use in your project like this:

import EventBridge from 'event-bridge';

// add event listener
EventBridge.add(element, 'click', function (e) {/*...*/});

// remove event listener
// NOTE: you have to use reference to the same function object that you used
// when you were adding the event listener... so no anonymous functions
function handleEvent(e) {/*...*/}
EventBridge.add(element, 'click', handleEvent);  // now the listener is active
EventBridge.remove(element, 'click', handleEvent);  // now it is not

// add multiple event listeners at once
EventBridge.add(element, ['mouseover', 'mouseout'], handleEvent);

// handy methods for cross-browser handling of event objects
EventBridge.add(element, 'click', function (e) {

  // get the event target (IE provides event.srcElement instead event.target)
  EventBridge.target(e);

  // stop the event
  EventBridge.stop(e);

});

// add first event supported by browser - this will add 'onPopState' event in
// modern browsers, but 'onHashChange' in IE9
EventBridge.addFirstSupported(window, ['popstate', 'hashchange'], function () {...});

Documentation

EventCallback

Callback fired by an Event.

Type: Function

Parameters

• event Event

event_object

Object for event listener. If function is used, it will be evaluated and its return value will be used.

Type: (Object | Function)

add

Add event listeners to the object.

Parameters

• object event_object Any object that can receive event listener. (optional, default window)
• events (string | Array<string>)? Single event name or list of event names. (optional, default [])
• callback EventCallback? Function to be called when event is fired. (optional, default noop)

once

Add event listeners to the object. After any of the events has been fired, the event listeners are removed.

Parameters

• object event_object Any object that can receive event listener. (optional, default window)
• events (string | Array<string>)? Single event name or list of event names. (optional, default [])
• callback EventCallback? Function to be called when event is fired. (optional, default noop)

addFirstSupported

Add first supported event listener from the list, ignore the rest.

Parameters

• object event_object Any object that can receive event listener. (optional, default window)
• events Array<string>? List of event names. (optional, default [])
• callback EventCallback? Function to be called when event is fired. (optional, default noop)

Examples

Use onPopState in modern browsers, but onHashChange in IE9.

addFirstSupported(window, ['popstate', 'hashchange'], function () {...});

addFirstSupportedOnce

Add first supported event listener from the list, ignore the rest. After the event has been fired, the event listener is removed.

Parameters

• object event_object Any object that can receive event listener. (optional, default window)
• events Array<string>? List of event names. (optional, default [])
• callback EventCallback? Function to be called when event is fired. (optional, default noop)

Examples

Cross-browser listener for CSS animation end:

addFirstSupportedOnce(my_element, ['transitionend', 'oTransitionEnd', 'webkitTransitionEnd'], function () {...});

remove

Remove event listeners from the object.

Parameters

• object event_object Any object that can receive event listener. (optional, default window)
• events (string | Array<string>)? Single event name or list of event names. (optional, default [])
• callback EventCallback? Function to be called when event is fired. (optional, default noop)

stop

Cancel the event and stop its further propagation.

Parameters

• event Event

target

Get reference to the object that dispatched the event.

Parameters

• event Event

Returns (Object | null)

sanitizeInputObject

Sanitizes input object, evaluates it if it is function.

Parameters

• input any?

Returns any

Bug reports, feature requests and contact

If you found any bugs, if you have feature requests or any questions, please, either file an issue at GitHub or send me an e-mail at mailto:[email protected].

License

This project is published under the MIT license. Feel free to use it in any way.