node package manager


Manage the events of a DOM element


A mixin class for managing the events of a MVC style View.

  • stores all listeners making cleanup easy
  • one DOM binding per event type
  • intuitive delegation
  • emits proper DOM events
  • convenient method binding
  • efficient context binding (no fn.bind(this))

With component, packin or npm

$ {package mananger} install jkroso/dom-emitter

then in your app:

var Emitter = require('dom-emitter')

mix Emitter methods on to object

Bind fn to type events. When fn is undefined it will be inferred from type. Delegation can also be specified in type by leaving a space then a css selector which is relative to this.el.

 this.on('click', this.onClick)
 this.on('click', 'onClick')
 this.on('click')     // implies "onClick" 
 this.on('click .ok') // delegates to `.ok` 

unbind fn from type events

All the following are equivalent:'click', this.onClick)'click', 'onClick')'click')

Create a DOM event and send it down to this.el. Any data you pass will be merged with the event object.

this.emit('login', {user: user})
this.emit('keydown', {key: 'enter'})

hook into the DOM

unhook from the DOM

convenience function for binding all events