Universal events binder.
- Multiple events
on(el, 'click touchstart', cb)
- Event classes
on(el, 'click.x', cb), off(el, '.x')
- Uses native events, if available.
- Delegate
on('.subel', 'click', cb, { target: container })
import {on, off, emit} from 'emmy'
on(el, 'evt.foo', e => {})
emit(el, 'evt', {x: 1})
off(el, '.foo')
Bind event
handler to target
events.
event
can be a string or an array, optionally with class suffixesclick.tag1.tag2
target
can be an element, list, or a string to delegate events.opts
can provideopts.target
for delegate target and listener props.
// dragging
on(el, 'mousedown touchstart', () => {
// ...init drag
on(el, 'mousemove.drag touchmove.drag', () => {
// ...handle drag
})
on(el, 'mouseup.drag touchend.drag', () => {
off(el, '.drag')
// ...end drag
})
})
// delegate
let off = on('.selector', 'click', handler, { target: container })
// remove listener
off()
Remove event
handler from a target
. If callback
isn't passed - all registered listeners are removed. If event
isn't passed - all registered callbacks for all known events are removed (useful on destroying the target).
// remove handler the standard way
off(target, 'click', handler)
// remove handler for all registered events
off(target, handler)
// remove all events with provided suffix[es]
off(target, '.special')
Emit an event
on a target
. event
can be a string or an Event instance. If target
is an element then data
is placed to e.details
. options
can define triggering params, eg. {bubbles: true}
.
MIT © Dmitry Ivanov.