fromEvent RxJS: cosa è, come si usa

In questo articolo vedremo come utilizzare l’operatore fromEvent di RxJS.

Dopo aver visto l’interfaccia dell’operatore, vedremo come utilizzarlo con un esempio pratico.

Prima di concludere, avremo la possibilità di vedere l’applicazione di fromEvent per più eventi.

Indice

fromEvent RxJS: cosa è

fromEvent è un operatore RxJS utilizzabile per creare un Observable che emetterà un valore quando l’elemento fornito come primo parametro emetterà l’evento fornito come secondo parametro.

Di seguito è riportato un semplice esempio di utilizzo di questo operatore.

const button = document.querySelector("button");
const click$ = fromEvent(button, "click");
click$.subscribe((e) => {
// quando l'Observable emetterà un nuovo valore
// questa funzione verrà eseguita
});

Se avessi bisogno di rinfrescare o approfondire il concetto di Observable, puoi consultare l’articolo Observable RxJS: cosa è, come si usa.

fromEvent RxJS: come si usa

L’utilizzo di questo operatore è molto simile a quello di addEventListener di JavaScript.

Ciò è offre in più fromEvent è la possibilità di creare composizioni.

Ad esempio:

Eseguire una funzione quando evento o (OR logico) un altro evento viene scatenato
Eseguire del codice quando un evento e (AND logico) un altro evento viene scatenato

Nel seguito potrai vedere come implementare del codice per soddisfare entrambe gli scenari.

Concatenare eventi con OR logico

Per poter concatenare eventi del DOM in OR logico è necessario utilizzare gli operatori RxJS:

fromEvent
merge

Se vuoi, puoi approfondire l’operatore merge leggendo l’articolo RxJS merge: guida ed esempi pratici.

const buttonOne = document.querySelector("button.one");
const buttonTwo = document.querySelector("button.two");
merge(
     fromEvent(buttonOne, "click"),
     fromEvent(buttonTwo, "click")
).subscribe((e) => {
// quando buttonOne o buttonTwo
// verrà cliccato,
// questa funzione verrà eseguita
});

Concatenare eventi con AND logico

Per poter concatenare eventi del DOM in AND logico è necessario utilizzare gli operatori RxJS:

fromEvent
combineLatest

Puoi approndire l’utilizzo dell’operatore RxJS combineLatest leggendo l’articolo combineLatest RxJS: come utilizzarlo.

Ecco un estratto di codice per ottenere la concatenazione in AND logico:

const buttonOne = document.querySelector("button.one");
const buttonTwo = document.querySelector("button.two");
combineLatest(
     fromEvent(buttonOne, "click"),
     fromEvent(buttonTwo, "click")
).subscribe((e) => {
// quando buttonOne e buttonTwo
// verrà cliccato,
// questa funzione verrà eseguita
});