Question

处理冒泡的事件包括在最顶层元素上创建事件的可观察对象并过滤流，例如

let view,
    formView;

formView = (count, query) =>
    <form id='search-form'>
        <input type='text' id='query' />
        <div>count: {count}, query: {query}</div>
    </form>;

view = () => {
    let input,
        count = 0;

    input = Observable
        .fromEvent(document, 'keyup')
        .filter(e => e.target.id === 'query');

    return input
        .map((e) => {
            return formView(++count, e.target.value);
        })
        .startWith(formView(0));
}

我不明白如何订阅不会冒泡的活动，例如“焦点”

input = Observable
        // event 'focus' does not bubble to the document
        .fromEvent(document, 'focus')
        .filter(e => e.target.id === 'query');

我做不到：

input = Observable
    .fromEvent(document.querySelector('#query'), 'focus')
    [..]

因为在执行代码时，#query元素不存在。

Answer 1

要回答关于冒泡焦点的评论中的问题，请改用focusin事件。它起泡了。使用this polyfill for Firefox。

要回答您的主要问题，每次制作新的DOM元素时都需要调用fromEvent。很难显示确切的代码，因为你所拥有的代码没有意义 - （当元素获得焦点时，重新创建元素??）。但它可能看起来像：

var focusEvent = view()
    .flatMapLatest(v => Rx.Observable.fromEvent(v.children[0], 'focus'));

如何创建一个没有冒泡的事件的可观察序列？

1 个答案: