Programming Reactive Extensions and LINQ

Integrating RxJS with jQuery DOM Events

Let's see how we can take DOM events such as ‘keyUp’ or ‘blur’, and create an Observable based on them, similar to how we use Observable.FromEvent in .NET. The easiest way to do this is via the RxJS jQuery adapter (included with RxJS as the file, rx.jQuery.js), which is a jQuery plug-in that adds extra methods onto jQuery that make using RxJS alongside jQuery a snap!

RxJS adds a new method called toObservable(), which converts a DOM event to an Observable. The following is a simple example:

var keyDownEvent = $(window).toObservable("keydown");

The Type of the data provided by the Observable depends on the DOM event—for keyDown, the type is KeyboardEvent, which has a property called ‘keyCode,’ which we ...