[英]Rxjs, fromEvent to handle multiple events
What is the best way to handle multiple events on the same DOM node in rxjs 5.1? 在rxjs 5.1中处理同一DOM节点上的多个事件的最佳方法是什么?
fromEvent($element, 'event_name')
but I can specify only one event at a time. fromEvent($element, 'event_name')
但我一次只能指定一个事件。
I want handle scroll wheel touchmove touchend
events. 我想要处理
scroll wheel touchmove touchend
事件。
Note: This is for RxJS v5. 注意:这是针对RxJS v5的。 See bottom of this answer for the v6 equivalent.
请参见此答案的底部以获取v6版本。
You can use the Rx.Observable.merge
function to merge multiple observable streams into a single stream: 您可以使用
Rx.Observable.merge
函数将多个可观察流合并为一个流:
// 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. 如果看起来有点肿,我们可以通过为事件创建一个数组来进行清理,然后将该数组映射到Observable对象。 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 更新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: 在RxJS 6中,您可以导入与v5中的静态方法等效的独立
merge
和fromEvent
函数,并以相同的方式使用它们:
import { fromEvent, merge } from 'rxjs';
const scrollEvents = fromEvent($element, 'scroll');
// creating other input observables...
const allEvents$ = merge(
scrollEvents$,
wheelEvents$,
touchMoveEvents$,
touchEndEvents$
);
This is how I prefer to combine events: 这就是我更喜欢组合事件的方式:
fromEvents(dom, "scroll", "wheel", "touch", "etc...");
function fromEvents(dom, ...eventNames: string[]) {
return eventNames.reduce(
(prev, name) => Rx.merge(prev, fromEvent(dom, name)),
Rx.empty()
);
}
This is how I would implement this in the newest version of RxJs 这就是我将如何在最新版本的RxJ中实现这一点
const events = ['scroll', 'resize', 'orientationchange']
from(events)
.pipe(
mergeMap(event => fromEvent($element, event))
)
.subscribe(
event => // Do something with the event here
)
As mentioned above, Below hopefully is easier to read. 如上所述,希望下面的内容更易于阅读。
import {fromEvent, merge} from "rxjs"; const mousemoveEvent = fromEvent(document, 'mousemove'); const wheelEvent = fromEvent(document, 'wheel'); const leftclickEvent = fromEvent(document, 'auxclick'); const rightclickEvent = fromEvent(document, 'click'); const keyboardEvent = fromEvent(document, 'keydown'); const allEvents = merge( mousemoveEvent, wheelEvent, leftclickEvent, rightclickEvent, keyboardEvent )
\r\n
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.