demo · v135

EventTarget.when(...).map().filter()

Chrome 135 ships Observables. EventTarget.when("event") returns an Observable you can compose with map, filter, takeUntil. Move your mouse over the box — the demo pipes pointermove events through an Observable chain.

Observable: ?

move pointer in the box

observed values (throttled, x > 100)

the code

const moves = canvas.when("pointermove");

moves
  .map((e) => ({ x: e.offsetX, y: e.offsetY }))
  .filter((p) => p.x > 100)
  .subscribe({
    next: (p) => renderDot(p),
  });

see also