RxJS fromEvent

創(chuàng)建一個 Observable，它發(fā)出來自給定事件目標(biāo)的特定類型的事件。

fromEvent<T>(target: FromEventTarget<T>, eventName: string, options?: EventListenerOptions | ((...args: any[]) => T), resultSelector?: (...args: any[]) => T): Observable<T>

參量

returns

Observable<T>：

描述

根據(jù) DOM 事件或 Node.js EventEmitter 事件或其他事件創(chuàng)建一個Observable。

fromEvent接受事件目標(biāo)作為第一個參數(shù)，該目標(biāo)是具有注冊事件處理函數(shù)的方法的對象。作為第二個參數(shù)，它使用指示我們要偵聽的事件類型的字符串。fromEvent支持所選類型的事件目標(biāo)，下面將對其進(jìn)行詳細(xì)描述。如果您的事件目標(biāo)與列出的目標(biāo)不匹配，則應(yīng)使用 fromEventPattern，可以在任意 API 上使用。對于所支持的 API fromEvent，它們用于添加和刪除事件處理程序函數(shù)的方法具有不同的名稱，但是它們都接受描述事件類型和函數(shù)本身的字符串，只要發(fā)生所述事件，就會調(diào)用該字符串。

每次預(yù)訂結(jié)果 Observable 時，事件處理函數(shù)將在給定事件類型上注冊到事件目標(biāo)。當(dāng)該事件觸發(fā)時，作為第一個參數(shù)傳遞給已注冊函數(shù)的值將由輸出 Observable 發(fā)出。取消訂閱 Observable 時，將從事件目標(biāo)中取消注冊功能。

請注意，如果事件目標(biāo)使用多個參數(shù)調(diào)用注冊函數(shù)，則第二個及后續(xù)參數(shù)將不會出現(xiàn)在結(jié)果流中。為了訪問它們，您可以傳遞到 fromEvent 可選的項(xiàng)目函數(shù)，該函數(shù)將與傳遞給事件處理程序的所有參數(shù)一起調(diào)用。然后，輸出 Observable 將發(fā)出由項(xiàng)目函數(shù)返回的值，而不是通常的值。

請記住，下面列出的事件目標(biāo)是通過鴨子類型檢查的。這意味著，無論您擁有哪種對象，無論您在什么環(huán)境中工作，只要 fromEvent 該對象公開了所描述的方法（當(dāng)然，它們的行為如上所述），都可以安全地使用該對象。因此，例如，如果 Node.js 庫公開的事件目標(biāo)與 DOM EventTarget 具有相同的方法名稱，fromEvent 則仍然是一個不錯的選擇。

如果您使用的 API 更具回調(diào)性，則面向事件處理程序（預(yù)訂的回調(diào)函數(shù)僅觸發(fā)一次，因此無需手動注銷它），應(yīng)使用 bindCallback 或 bindNodeCallback 代替。

fromEvent 支持以下類型的事件目標(biāo)：

DOM EventTarget

這是帶有 addEventListener 和 removeEventListener 方法的對象。

在瀏覽器中，addEventListener 除了事件類型字符串和事件處理程序函數(shù)參數(shù)外，還接受可選的第三個參數(shù)，它是一個對象或布爾值，均用于附加配置，如何以及何時調(diào)用傳遞的函數(shù)。當(dāng) fromEvent與該類型的事件目標(biāo)一起使用時，您也可以將此值作為第三個參數(shù)。

Node.js EventEmitter

具有 addListener和 removeListener 方法的對象。

jQuery 風(fēng)格的事件目標(biāo)

具有 on 和 off 方法的對象

DOM 節(jié)點(diǎn)列表

DOM 節(jié)點(diǎn)列表，例如由 document.querySelectorAll或返回 Node.childNodes。

盡管此集合本身不是事件目標(biāo)，但 fromEvent 將迭代它包含的所有節(jié)點(diǎn)并在每個節(jié)點(diǎn)中安裝事件處理程序功能。返回的 Observable 取消訂閱后，該功能將從所有 Node 中刪除。

DOM HtmlCollection

就像 NodeList 一樣，它是 DOM 節(jié)點(diǎn)的集合。此處，事件處理程序功能也在每個元素中安裝和刪除。

例子

發(fā)出 DOM 文檔上發(fā)生的點(diǎn)擊

import { fromEvent } from 'rxjs';


const clicks = fromEvent(document, 'click');
clicks.subscribe(x => console.log(x));


// Results in:
// MouseEvent object logged to console every time a click
// occurs on the document.

使用帶有捕獲選項(xiàng)的 addEventListener

import { fromEvent } from 'rxjs';


const clicksInDocument = fromEvent(document, 'click', true); // note optional configuration parameter
                                                             // which will be passed to addEventListener
const clicksInDiv = fromEvent(someDivInDocument, 'click');


clicksInDocument.subscribe(() => console.log('document'));
clicksInDiv.subscribe(() => console.log('div'));


// By default events bubble UP in DOM tree, so normally
// when we would click on div in document
// "div" would be logged first and then "document".
// Since we specified optional `capture` option, document
// will catch event when it goes DOWN DOM tree, so console
// will log "document" and then "div".

超載

fromEvent(target: FromEventTarget<T>, eventName: string): Observable<T>

returnsObservable<T>

fromEvent(target: FromEventTarget<T>, eventName: string, resultSelector: (...args: any[]) => T): Observable<T>

returnsObservable<T> fromEvent(target: FromEventTarget<T>, eventName: string, options: EventListenerOptions): Observable<T>

returnsObservable<T>

fromEvent(target: FromEventTarget<T>, eventName: string, options: EventListenerOptions, resultSelector: (...args: any[]) => T): Observable<T>

也可以看看

• bindCallback
• bindNodeCallback
• fromEventPattern