Reactive Programming with RxJS/

...

/

Querying the Sequence

Querying the Sequence

Learn to manipulate events that occur in a sequence.

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:

Press + to interact
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:

Press + to interact
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 ...