RxJSのfromEventとfromEventPattern

RxJS にはイベントハンドリングをする API が2種類あります。 fromEvent と fromEventPattern です。前者は DOM イベントを処理するための API で、後者は任意のイベントハンドラーに対して add と remove を手動で処理する API です。

例えば KeyboardEvent を処理するときに、やっていることは同じですが2種類の書き方ができます。

const destroy$: Subject<void> = new Subject<void>();
const input: HTMLInputElement = document.createElement('input');

// fromEventを使用してDOMイベントを処理する
fromEvent<KeyboardEvent>(input, 'keydown')
  .pipe(
    filter(ev => ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)),
    takeUntil(destroy$),
  )
  .subscribe(ev => {
    // なにか
  });

// fromEventPatternを使用してDOMイベントを処理する
fromEventPattern<KeyboardEvent>(
  handler => input.addEventListener('keydown', handler),
  handler => input.removeEventListener('keydown', handler))
  .pipe(
    filter(ev => ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)),
    takeUntil(destroy$),
  )
  .subscribe(ev => {
    // なにか
  });

ちなみに fromEvent は DOM の addEventListener/removeEventListener 、 jQuery の on/off 、 Node.js の addListener/removeListener の組み合わせに対して使用できます。逆に言うとこれ以外の組み合わせに対してイベントハンドリングをしたい場合は fromEventPattern を使用します。