2017-08-03 27 views
4

rxjs 5.1の同じDOMノードで複数のイベントを処理する最適な方法は何ですか?Rxjs、fromEventから複数のイベントを処理する

fromEvent($element, 'event_name')ただし、一度に1つのイベントしか指定できません。

私はハンドルscroll wheel touchmove touchendイベントを欲しいです。それは少し肥大化したと思われる場合、我々はまた、イベントのための配列でビットをクリーンアップし、その後かもしれない、

// First, create a separate observable for each event: 
const scrollEvents$ = Rx.Observable.fromEvent($element, 'scroll'); 
const wheelEvents$ = Rx.Observable.fromEvent($element, 'wheel'); 
const touchMoveEvents$ = Rx.Observable.fromEvent($element, 'touchmove'); 
const touchEndEvents$ = Rx.Observable.fromEvent($element, 'touchend'); 

// Then, merge all observables into one single stream: 
const allEvents$ = Rx.Observable.merge(
    scrollEvents$, 
    wheelEvents$, 
    touchMoveEvents$, 
    touchEndEvents$ 
); 

答えて

11

あなたは、単一のストリームに複数の観察可能なストリームをマージするRx.Observable.merge機能を使用することができますその配列をObservableオブジェクトにマッピングします。

const subscription = allEvents$.subscribe((event) => { 
    // do something with event... 
    // event may be of any type present in eventNames array 
}); 

const eventNames = ['scroll', 'wheel', 'touchmove', 'touchend']; 

/** @var {Array<Rx.Observable>} eventStreams */ 
const eventStreams = eventNames.map((eventName) => { 
    return Rx.Observable.fromEvent($element, eventName); 
}); 

const allEvents$ = Rx.Observable.merge(...eventStreams); 

あなたは今、1つのサブスクリプションにすべてのイベントを処理することができます:これは最高のあなたには、いくつかの時点で、別途のイベントそれに関連する観測を参照する必要はありません場合作品