Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1046 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Fine-grained control over the DOM Source

2:58 RxJS lesson by

What if we wanted to change the behavior of our app reset the timer every time the mouse hovers over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

What if wanted to change the behavior of our app reset the timer every time the mouse hovers over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

We just improved our DOM driver to be able to receive these objects describing what sort of elements are to be created on the DOM. We didn't touch yet the DOM source, which is still the observable of all of the clicks happening on the document.

This feature of every time of clicking on the document should still work for resetting the timer. But what if we wanted to change this behavior to be, every time you hover on the timer, it should reset? That certainly sounds like app logic and app logic should live in the main.

On the other hand, we don't have that logic living right now in the main because sources.DOM is always a click. How can we specify it to be a hover, for instance. The API that we're seeking for is something that looks like this, where we're able to specify from here that, "Hey, I want clicks happening on the span."

This will be actually clicks on the span, but I could say instead, "I want actually mouseovers happening on the span." This allows us to put this logic inside main and not in the DOM driver, which we know it should only concern about effects and no logic.

The way we achieve that API is by returning the DOM source as an object with the function, select events, which takes a selector, or, let's say, a tag name and an event type. It returns an observable. In this case, we want not clicks, but event type.

For each of these events that happen on the DOM, we don't want events coming from any element, so we want to filter these events to be only those events that happened on the target that matches the tag name.

The tag name equals this tag name to uppercase. Select events will return us this observable of events that happen only on the elements that match this. Now, we have this observable of, let's say, mouseover stream and it has all the mouseover events that happen on the span. If I just hover over the span, it pre-sets the timer.

If I click on the DOM, nothing happens. That's what we want to do. We want to be able to put this type of logic inside the main.

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