This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Creation operators: fromEventPattern, fromEvent

3:49 RxJS lesson by

Besides converting arrays and promises to Observables, we can also convert other structures to Observables. This lesson teaches how we can convert any addEventHandler/removeEventHandler API to Observables.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Besides converting arrays and promises to Observables, we can also convert other structures to Observables. This lesson teaches how we can convert any addEventHandler/removeEventHandler API to Observables.

Avatar
David

When is it executed removeEventHandler function? I see in docs it is an optional argument, but don't know how it would be used. Can you provide a practical example using both arguments?

In reply to egghead.io
Avatar
Andre

Hi David. When we unsubscribe from the Observable created with fromEventPattern, the removeEventHandler function will be called.

In reply to David

We just saw how to convert arrays and promises to observables using the from operator. There are other things we can convert to observables as well.

Whenever you have an API that looks like this, add event handler and remove event handler, these are quite common in the DOM and also in node.js -- you can convert that to an observable using the operator from event pattern, which is available under rx.observable.. That is a function that takes two arguments. It takes add event handler and remove event handler, and then it will return an observable.

Let's see how this works in practice. Let's listen to click events, for instance. Let's make this function as it takes a handler as an argument, handler function. Then it registers on the DOM that we are interested in listening to click events using this handler. Symmetrically for removing, we'll remove that event listener.

OK, so now when we call this we get an observable, which we can call foo. When foo is subscribed, it will attach that event handler to the DOM here to listen to clicks. When clicks happen, they will be delivered to the observer, which will put them in console log. If we run this and click on the DOM here, we see those events being delivered to the observer, which is putting them on console.

How does from event pattern happen or work under the hood? Let's try to use create as we had in previous lessons, rx.observable.create. If you see a from event pattern as a function that takes add and remove, what that returns is an observable, such that for each observer that subscribes, it will add that event handler. What is that handler, actually? That's a good question.

As you can see here, this API doesn't take the actual handler in. It just takes the function that knows how to add that handler, but it doesn't take the handler. That's because a handler in this case will be a function that takes that event, and just forwards that event to the observer. That's what the handler is in this case. It forwards the events that it listens to the observer.

This is a really simplified version of from event pattern. Now if we use that, if we say var foo = from event pattern and we use these two functions, we will see it working as it was before. Of course, from event pattern is more complex than this, it also handles removing. We didn't use that, but the idea is pretty much this.

Because it's quite common to handle DOM events such as click and et cetera, there is also another operator which is a specialized version of from event pattern, which is called just from event. That takes a target and an event type, and this is mainly for the DOM.

What from event allows us to do is to forget about adding and removing event handlers. We just think about the target, which is the document, and what type of events we want, which are clicks. We can just say var foo equals that. Once we click here on the DOM, we see the same thing.

That is basically how you convert from event streams on the DOM and in node.js to observables if you have an API that looks like add event handler or remove event handler.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?