Event-bridge NPM

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)