Search⌘ K
AI Features
Home
Courses
Reactive Programming with RxJS

Querying the Sequence

Explore how RxJS Observables transform event handling by treating streams of events like queryable data sequences. Understand how to avoid external state and simplify asynchronous code by using Observables to filter, transform, and manage streams such as mouse clicks efficiently.

We'll cover the following...

Let’s implement a simple version of that mouse stream using traditional event listeners in JavaScript. To log the x- and y-coordinates of mouse clicks, we could write something like this:

Javascript (babel-node)
const registerClicks = e => 
{
  console.log(e.clientX, e.clientY);
};
document.body.addEventListener("click", registerClicks);

The problem, of course, is that manipulating events is not as easy as manipulating arrays. For example, if we want to change the preceding code so it logs only the first ten clicks on the right side of the screen (quite a random goal, but bear with me here), we would write something like this:

Javascript (babel-node)
var clicks = 0;
document.addEventListener('click', function registerClicks(e) 
{
      if (clicks < 10) 
      {
            if (e.clientX > window.innerWidth / 2) 
            {
                  console.log(e.clientX, e.clientY);
                  clicks += 1; 
            }
      } 
      else 
      {
            document.removeEventListener('click', registerClicks);
      }
});

To meet our requirements, we introduced an ...