Functional DOM Events Processor
[]npm-url []build-status-link []quality-link []coverage-link []github-url []api-docs-url
Extension of @proc7ts/fun-events for DOM event processing in reactive style.
DOM Events
DOM events are supported by OnDomEvent
and DomEventDispatcher
.
OnDomEvent
extends an OnEvent
sender with DOM-specific functionality. It sends DOM Events
to DomEventListener
s
DomEventDispatcher
can be attached to arbitrary EventTarget
. It constructs an OnDomEvent
senders for each event type and dispatches DOM events.
import { DomEventDispatcher } from '@frontmeans/dom-events';
const dispatcher = new DomEventDispatcher(document.getElementById('my-button'));
dispatcher.on('click')(submit);
dispatcher.dispatch(new MouseEvent('click'));
DOM-specific Actions
Along with basic API this library provides DOM-specific actions.
captureDomEvents()
Creates an OnDomEvent
sender that enables event capturing by default.
This corresponds to specifying true
or { capture: true }
as a second argument to EventTarget.addEventListener()
.
import { captureDomEvents, DomEventDispatcher } from '@frontmeans/dom-events';
const container = document.getElementById('my-container');
// Clicking on the inner elements would be handled by container first.
new DomEventDispatcher(container).on('click').do(captureDomEvents)(handleContainerClick);
// The above is the same as
container.addEventListener('click', handleContainerClick, true);
handleDomEvents()
Creates a DOM events processor that enables or disables default DOM event handlers.
Corresponds to specifying { passive: true }
as a second argument to EventTarget.addEventListener()
when true
passed as parameter, or no parameters passes.
import { DomEventDispatcher, handleDomEvents } from '@frontmeans/dom-events';
// Scrolling events won't be prevented.
new DomEventDispatcher(document.body).on('scroll').do(handleDomEvents())(handleScroll);
// The above is the same as
document.body.addEventListener('scroll', handleScroll, { passive: true });
Causes listeners to invoke an Event.preventDefault()
method prior to event handling when false
passed as parameter.
import { DomEventDispatcher, handleDomEvents } from '@frontmeans/dom-events';
// Clicking on the link won't lead to navigation.
new DomEventDispatcher(document.getElementById('my-href')).on('click').do(handleDomEvents(false))(doSomething);
// The above is the same as
document.getElementById('my-href').addEventListener('click', event => {
event.preventDefault();
doSomething(event);
});
interceptDomEvents()
Creates an OnDomEvent
sender preventing other listeners of the same event from being called.
Causes listeners to invoke an Event.stopImmediatePropagation() method prior to event handing.
import { DomEventDispatcher, interceptDomEvents } from '@frontmeans/dom-events';
const dispatcher = new DomEventDispatcher(document.getElementById('my-div'));
const onClick = dispatcher.on('click');
// The ascendants won't receive a click the div.
onClick.do(interceptDomEvents)(() => console.log('1')); // This is the last handler
onClick(() => console.log('2')); // This one won't be called
dispatcher.dispatch(new MouseEvent('click')); // console: 1
// The first listener registration above is the same as
document.getElementById('my-div').addEventListener('click', event => {
event.stopImmediatePropagation();
console.log('1');
});
stopDomEvents()
Creates an OnDomEvent
sender preventing further propagation of events in the capturing and bubbling phases.
Causes listeners to invoke an Event.stopPropagation() method prior to event handing.
import { DomEventDispatcher, stopDomEvents } from '@frontmeans/dom-events';
// The ascendants won't receive a click the div.
new DomEventDispatcher(document.getElementById('my-div')).on('click').do(stopDomEvents)(handleClick);
// The above is the same as
document.getElementById('my-div').addEventListener('click', event => {
event.stopPropagation();
handleClick(event);
});