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
を使用します。