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.
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 () {...});
Callback fired by an Event.
Type: Function
Parameters
event
Event
Object for event listener. If function is used, it will be evaluated and its return value will be used.
Add event listeners to the object.
Parameters
object
event_object Any object that can receive event listener. (optional, defaultwindow
)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, defaultnoop
)
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, defaultwindow
)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, defaultnoop
)
Add first supported event listener from the list, ignore the rest.
Parameters
object
event_object Any object that can receive event listener. (optional, defaultwindow
)events
Array<string>? List of event names. (optional, default[]
)callback
EventCallback? Function to be called when event is fired. (optional, defaultnoop
)
Examples
Use onPopState
in modern browsers, but onHashChange
in IE9.
addFirstSupported(window, ['popstate', 'hashchange'], function () {...});
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, defaultwindow
)events
Array<string>? List of event names. (optional, default[]
)callback
EventCallback? Function to be called when event is fired. (optional, defaultnoop
)
Examples
Cross-browser listener for CSS animation end:
addFirstSupportedOnce(my_element, ['transitionend', 'oTransitionEnd', 'webkitTransitionEnd'], function () {...});
Remove event listeners from the object.
Parameters
object
event_object Any object that can receive event listener. (optional, defaultwindow
)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, defaultnoop
)
Cancel the event and stop its further propagation.
Parameters
event
Event
Get reference to the object that dispatched the event.
Parameters
event
Event
Returns (Object | null)
Sanitizes input object, evaluates it if it is function.
Parameters
input
any?
Returns any
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:riki@fczbkk.com.
This project is published under the MIT license. Feel free to use it in any way.