Fluent-event NPM

Fluent DOM event toolkit.

API

Flags: first => run fn first, then debounce

fn = (x: number) => console.log(x)
// => runs `fn` after 100ms following last call
cb = debounce()(fn, 100)
cb(1)
cb(2) // <- cb(2) wins, prints `2`

// => runs `fn` first then debounces until 100ms of inactivity
cb = debounce().first(fn, 100)
cb(1) // <- cb(1) wins, prints `1`
cb(2)

Flags:

prevent => event.preventDefault()
stop => event.stopPropagation()
stop.immediate => event.stopImmediatePropagation()

btn.onclick = event()(fn)
btn.onclick = event().prevent(fn)
btn.onclick = event().prevent.stop(fn)
btn.onclick = event().stop.immediate(fn)

Flags: active | capture | once | passive

on()(btn, 'click', fn)
on().once(btn, 'click', fn)
on().passive(div, 'wheel', fn)

const off = on().passive.capture(btn, 'wheel', fn)
// ...later...
off() // remove listener

All queue functions are also throttled to once per invocation.

// decorate function with `requestAnimationFrame`
const cbWithRaf = queue().raf(cb)

// decorate function with `setTimeout`
const cbWithTimeout = queue().time(cb)

// decorate function with `queueMicrotask`
const cbWithMicrotask = queue().task(cb)