Rxjs，fromEvent來處理多個事件

Question

什麼是處理在rxjs 5.1相同的DOM節點對多個事件的最好方法？

fromEvent($element, 'event_name')但我只能指定一次一個事件。

我想處理scroll wheel touchmove touchend事件。

Answer 1

可以使用Rx.Observable.merge功能多可觀察到的流合併成一個單一的數據流：

// 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$ 
); 

如果這看起來有點臃腫，我們可能還會收拾了一下與事件的數組，然後將該數組映射到Observable對象。這個工作最好如果你不需要在某些時候單獨引用事件及其相關的觀測量：

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); 

您現在能夠處理所有事件與一個單一的訂閱：

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