Dependency free lightweight implementation of Observer pattern in Javascript
- Dependency free
- Cross-browser: Chrome, Safari 3+, FF 1.5+, IE 5.5+, Opera 7+, all mobile browsers
- Supports a context for subscribers
- Supports subscribing to multiple events at once
- Simple: no bullshit like namespaces, async event emitting, priority, try/catch etc
- Small size: (700 bytes minified and gzipped)
- Provided as a UMD module
Install it from NPM:
npm install event-emit
Or download it directly from /dist/event-emit.min.js
Include it as a script tag to your HTML page:
<script src="node_modules/event-emit/dist/event-emit.min.js"></script>
<script>
// window.EventEmit is avaialable here
</script>
Or use it as a CommonJS module:
var EventEmit = require('event-emit')
or as a AMD module:
define(['EventEmit'], function (EventEmit) {
// Use EventEmit here
});
or as a ES2015 module:
import {EventEmit} from 'event-emit'
import {EventEmit} from 'event-emit'
const componentA = {}
EventEmit.mixinTo(componentA)
// Subscribe to event
componentA.on('some_event', function (evt) {
console.log(`event ${evt} has been fired`);
});
// Publish the event
componentA.emit('some_event');
import {EventEmit} from 'event-emit'
const componentA = {}
const componentB = {
onChange: function () {
console.log(this === componentB) // true
}
}
EventEmit.mixinTo(componentA)
// Subscribe to the event and pass a context for the listener
componentA.on('some_event', componentB.onChange, componentB);
import {EventEmit} from 'event-emit'
const componentA = {}
EventEmit.mixinTo(componentA)
componentA.on('some_event', function (evt, arg1, arg2) {
console.log(`event ${evt} has been fired with`, arg1, arg2); // {foo: bar}, 10
});
// Publish the event
componentA.emit('some_event', {foo: bar}, 10);
import {EventEmit} from 'event-emit'
const componentA = {}
EventEmit.mixinTo(componentA)
// Subscribe to the event
componentA.once('event', function () {
console.log('event fired');
});
componentA.emit('event'); // "event fired"
componentA.emit('event'); // Nothing happened
import {EventEmit} from 'event-emit'
const componentA = {}
const componentB = {}
EventEmit.mixinTo(componentA)
// Define a listener
function listener (evt, data) {
}
// Subscribe to events
componentA.on('some_event', listener)
componentA.on('some_event', listener, componentB)
componentA.on('another_event', function () { /*...*/ })
componentA.on('another_event', function () { /*...*/ })
// Publish the event
componentA.emit('some_event')
// Remove the first subscription that was created w/o context
componentA.off('some_event', listener)
// Remove the second subscription w/ context
componentA.off('some_event', listener, componentB)
// Remove all listeners of given event
componentA.off('another_event')
import {EventEmit} from 'event-emit'
const componentA = {}
EventEmit.mixinTo(componentA)
// Defined a listener
function listener (evt) {
console.log(`event ${evt} has been fired`)
}
// Add this listener for three events at once
componentA.on('event_1 event_2 event_3', listener)
// Publish two events
componentA.emit('events_1 events_3', 'some data')
// remove specific listener of event_1 and event_2
componentA.off('event_1 event_2', listener)
// remove all subscriptions of event_2 and event_3
componentA.off('event_2 event_3')
import {EventEmit} from 'event-emit'
const {emit: publish, on: subscribe, off: unsubscribe} = EventEmit.prototype;
export const pubsub = {
publish,
subscribe,
unsubscribe
}
// component-a/index.js
import {pubsub} from 'path/to/pubsub'
pubsub.subscribe('some-event', function (evt, data) {
console.log(`Pubsub event ${evt} has been fired with`, data);
})
// component-b/index.js
import {pubsub} from 'path/to/pubsub'
pubsub.publish('some-event', {
foo: 'bar'
})