DOM events manager with namespace support
npm install oui-dom-events
Bind fn
to be called when eventName
is triggered on element
import E from 'oui-dom-events'
let el = document.querySelector('div');
let fn = function() { /*...*/ }
E.on(el, 'click', fn);
// bind with namespace
E.on(el, 'click.slider', fn);
Remove all event callbacks bing called when eventName
is triggered on element
E.off(el, 'click');
// unbind with namespace
E.off(el, 'click.slider');
Remove fn
from being called when eventName
is triggered on element
// this also unbind events with namespace
E.off(el, 'click', fn);
// only unbind fn with namespace
E.off(el, 'click.slider', fn);
Delegate fn
to be called when eventName
is triggered on all elements that match selector
under element
E.delegate(el, '.item', 'click', fn);
// delegate with namespace
E.delegate(el, '.item', 'click.slider', fn);
Delegate fn
to be called when eventName
is triggered on all elements that match selector
under element
E.undelegate(el, '.item', 'click', fn);
// undelegate with namespace
E.undelegate(el, '.item', 'click.slider', fn);
E.undelegate(el, '.item', 'click.slider');
// off also unbind all delegated events
E.off(el, 'click');
Trigger an eventName
with dataObject
on element
E.trigger(el, 'click', {key1: 'data1'})
mouseenter
doesn't bubble, usemouseover
andmouseout
instead.
MIT