Dual-emitter NPM

dual-emitter

EventEmitter done right and no dependencies. For nodejs and the browser (>= IE8). Can emit custom or DOM events.

Install

npm i dual-emitter --save
npm test

Features

minimal, yet simple to use
just 4kb minified - no jQuery, no dependencies
works on the browser (even IE8), use dist/dual-emitter.min.js
works on the server, just install it and require it
can emit (trigger or whatever you call it) DOM events manually
have .on, .off, .once and .emit methods

Usage

For more use-cases see the tests

var DualEmitter = require('dual-emitter')
var emitter = new DualEmitter()

function handler () {
  console.log('foo bar')
}

emitter
  .once('custom', function () {
    console.log('executed once')
  })
  .on('foo', handler)
  .emit('custom', 'abc')
  .emit('custom', 'foo', ['bar', 'baz'])
  .emit('custom')
  .off('foo', handler)
  .on('click', function () {
    console.log('link clicked')
  }, document.body.querySelector('a[href]'))

API

DualEmitter

Create a new instance of DualEmitter.

[events] {Object} Initialize with default events.

Example

var DualEmitter = require('dual-emitter')
var emitter = new DualEmitter()

.on

Add/bind event listener to custom or DOM event. Notice that this in event handler function vary - it can be the DOM element or DualEmitter instance.

<name> {String} event name
<fn> {Function} event handler
[el] {Object} optional DOM element
returns {DualEmitter} DualEmitter for chaining

Example

function handler (a, b) {
  console.log('hi', a, b) //=> hi 123 bar
}

function onclick (evt) {
  console.log(evt, 'clicked')
}

var element = document.body.querySelector('a.link')

emitter.on('custom', handler).emit('custom', 123, 'bar')
emitter.on('click', onclick, element).off('click', onclick, element)

.off

Remove/unbind event listener of custom or DOM event.

<name> {String} event name
<fn> {Function} event handler
[el] {Object} optional DOM element
returns {DualEmitter} DualEmitter for chaining

Example

var element = document.body.querySelector('a.link')
emitter.off('custom', handler)
emitter.off('click', onclick, element)

.once

Add one-time event listener to custom or DOM event. Notice that this in event handler function vary - it can be the DOM element or DualEmitter instance.

<name> {String} event name
<fn> {Function} event handler
[el] {Object} optional DOM element
returns {DualEmitter} DualEmitter for chaining

Example

emitter
  .once('custom', function () {
    console.log('executed one time')
  })
  .emit('custom')
  .emit('custom')

var element = document.body.querySelector('a.link')
emitter.once('click', function () {
  console.log('listen for click event only once')
}, element)

.emit

Emit/execute some type of event listener. You also can emit DOM events if last argument is the DOM element that have attached event listener.

<name> {String} event name
[args...] {Mixed} context to pass to event listeners
[el] {Object} optional DOM element
returns {DualEmitter} DualEmitter for chaining

Example

var i = 0

emitter
  .on('custom', function () {
    console.log('i ==', i++, arguments)
  })
  .emit('custom')
  .emit('custom', 123)
  .emit('custom', 'foo', 'bar', 'baz')
  .emit('custom', [1, 2, 3], 4, 5)

// or even emit DOM events, but you should
// give the element as last argument to `.emit` method
var element = document.body.querySelector('a.link')
var clicks = 0

emitter
  .on('click', function (a) {
    console.log(a, 'clicked', clicks++)
  }, element)
  .emit('click', 123, element)
  .emit('click', element)
  .emit('click', foo, element)

._isDom

Check that given val is DOM element. Used internally.

val {Mixed}
returns {Boolean}

Example

var element = document.body.querySelector('a.link')

emitter._isDom(element) //=> true
emitter._isDom({a: 'b'}) //=> false

._hasOwn

Check that key exists in the given obj.

obj {Object}
key {String}
returns {Boolean}

Example

var obj = {a: 'b'}

emitter._hasOwn(obj, 'a') //=> true
emitter._hasOwn(obj, 'foo') //=> false

.extend

Static method for inheriting both the prototype and static methods of the DualEmitter class.

Ctor {Function} The constructor to extend.

Example

function MyApp(options) {
  DualEmitter.call(this)
}
DualEmitter.extend(MyApp)

// Optionally pass another object to extend onto `MyApp`
function MyApp(options) {
  DualEmitter.call(this)
  Foo.call(this, options)
}
DualEmitter.extend(MyApp, Foo.prototype)

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
But before doing anything, please read the CONTRIBUTING.md guidelines.