Rxjs, fromEvent to handle multiple events

Question

What is the best way to handle multiple events on the same DOM node in rxjs 5.1?

fromEvent($element, 'event_name') but I can specify only one event at a time.

I want handle scroll wheel touchmove touchend events.

Answer 1

Note: This is for RxJS v5. See bottom of this answer for the v6 equivalent.

---

You can use the Rx.Observable.merge function to merge multiple observable streams into a single stream:

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

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

If that seems a little bloated, we might clean up a little by creating an array for the events, and then map that array to Observable objects. This works best if you do not need to reference the events their associated observables separately at some point:

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

const eventStreams = events.map((ev) => Observable.fromEvent($element, ev));
const allEvents$ = Observable.merge(...eventStreams);

You are now able to handle all events with one single subscription:

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

---

Update RxJS v6

In RxJS 6 you can import the standalone merge and fromEvent functions equivalent to the static methods in v5, and use them the same way:

import { fromEvent, merge } from 'rxjs';

const scrollEvents = fromEvent($element, 'scroll');
// creating other input observables...

const allEvents$ = merge(
    scrollEvents$,
    wheelEvents$,
    touchMoveEvents$,
    touchEndEvents$
);