如何创建不冒泡的事件的可观察序列？

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 事件。它起泡。对 Firefox 使用 this polyfill。

要回答您的主要问题，您需要在每次生成新的 DOM 元素时致电 fromEvent。很难显示确切的代码，因为您拥有的代码没有意义 - （当元素获得焦点时，重新创建元素？？）。但它可能看起来像：

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