RxJS fromEvent

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

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)建一個(gè)Observable。

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

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

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

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

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

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

DOM EventTarget

這是帶有 addEventListener 和 removeEventListener 方法的對(duì)象。

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

Node.js EventEmitter

具有 addListener和 removeListener 方法的對(duì)象。

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

具有 on 和 off 方法的對(duì)象

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

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

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

DOM HtmlCollection

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

例子

發(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