dom-emitter
Manage the events of a DOM element
Last updated 7 years ago by jkroso .
MIT · Original npm · Tarball · package.json
$ cnpm install dom-emitter 
SYNC missed versions from official npm registry.

Dom Emitter

Manage the events of a DOM element.

Features

  • 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))

Examples

var body = new DomEmitter(document.body)
body.on('click', console.log)
body.emit('click', {x:50,y:112})
// => {type: 'click', x:50, y:112, ...}

It is also has a simple system for inferring methods from the name of the event:

function Button () {
	this.view = document.createElement('button')
	this.events = new DomEmitter(this.view, this)
	this.events.on('click')
}
Button.prototype.onClick = console.log
new Button().events.emit('click', {x:50,y:112})
// => {type: 'click', x:50, y:112, ...}

Delegation. leave a space then write a CSS query:

body.on('click > div.button') // infers "onClick"

Will only be triggered if a click occurs within a direct child of document.body that has a tagName of "div" and a "button" class.

Naming delegated functions can be a bit tricky so sometimes its more readable to declare them in an object:

body.on({
	'click > div.button': console.log,
	'mousedown > div.button': function(e){
		e.delegate.style.backgroundColor = '#888'
	},
	'login': function(e){
		alert('Welcome!')
	}
})

Getting Started

With component

$ component install jkroso/dom-emitter

With npm

$ npm install jkroso/dom-emitter --save

API

var DomEmitter = require('dom-emitter')

DomEmitter()

Initialize a DomEmitter. If you provide a context then that will be the source of implies methods. It will also be this inside handlers.

new DomEmitter(document.body, {
  onClick: console.log  
})

DomEmitter.on(type:String, [method]:String)

Bind to type with optional method. When method is undefined it inferred from type. Delegation is can be specified in type

 events.on('click', 'onClick')
 events.on('click') // implies "onClick"
 events.on('click', function (e) {})
 events.on('click .ok') // delegates to `.ok`

DomEmitter.off(type:String, [method]:String)

Remove a single behavior

All the following are equivalent:

events.off('click', 'onClick')
events.off('click') // implies 'onClick'
events.off('click', events.onClick)

DomEmitter.once()

Add listener but remove it after one call

DomEmitter.emit(topic:String, [data]:Any)

Create a DOM event and send it down to the DomEmitter's target. Any data you pass will be merged with the event object

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

DomEmitter.clear([topic]:String)

Remove all bound functions. Optionally limited to a certain topic

this.clear() // all
this.clear('click') // just click handlers

Current Tags

  • 0.7.0                                ...           latest (7 years ago)

2 Versions

  • 0.7.0                                ...           7 years ago
  • 0.6.0                                ...           7 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |