+ Creates a new Observable based on a given target or a collection of targets, and a specific event type. + fromEvent allows an options object or a selector method to be passed for extra customization. +
++ The event target is an object with methods for registering event handler functions. + Valid objects are either a DOM EventTarget, a Node.js EventEmitter, + a JQuery-style event target, a DOM NodeList, or a DOM HTMLCollection. + These types are described in detail below. +
++ Note that the event target is checked through duck typing. In other words + no matter what kind of object you have and no matter what environment you work in, + you can safely use fromEvent on that object if it exposes any of the described methods (provided + of course they behave as described). + For example if a Node.js library exposes an event target with the same method names as a DOM EventTarget, fromEvent is still + a good choice. +
++ If your event target does not match any of the objects listed, + you should use fromEventPattern, which can be used on arbitrary APIs. +
++ Every time a subscription is made to the resulting Observable, + the next function of the Subscriber object is registered as the event handler + to the event target on the given event type. When that event fires, the value + passed as the first argument to the registered function will be emitted by that same Observable. + When the Observable gets unsubscribed, the event handler will be unregistered from the event target. +
+ ++ Note that if the event target would normally (without RxJS) call the registered event handler with more than one argument, + the second and its following arguments will not appear in the resulting Observable stream (see below for a jQuery example). + In order to get access to them, + an optional selector function can be passed to fromEvent. + The selector will be called with all arguments passed to the registered event handler. + The resulting Observable will then emit the value as returned by the selector function, + instead of the usual value. +
++ If the API you use is more callback than event handler oriented (where the subscribed + callback function fires only once and thus there is no need to manually + unregister it), you should use bindCallback + or bindNodeCallback instead. +
+ +This is an object with addEventListener and removeEventListener methods.
+ ++ In the browser, addEventListener accepts - apart from the event type string and the event + handler function arguments - an optional third parameter, which is either an object or boolean, + both used for additional configuration on how and when the passed function will be called. With + fromEvent you can also provide this optional third parameter. +
+ +This is an object with addListener and removeListener methods.
+ +This is an object with on and off methods.
+ +This is a list of DOM Nodes, returned for example by document.querySelectorAll or Node.childNodes.
+ ++ Although this collection is not an event target in itself, fromEvent will iterate over all Nodes + it contains and register an event handler function for every one of them. When the returned Observable + gets unsubscribed, the event handler function will be removed from all Nodes. +
+ ++ This is a collection of HTML elements or DOM nodes, very similar to the DOM NodeList. + Likewise, the event handler function gets registered and removed for each one of the elements.
++
+ $("#foo").on("custom", function(event, param1, param2) {
+ console.log(param1 + " " + param2);
+ });
+ $("#foo").trigger("custom", ["Custom", "Event"]);
+
+
+ `
+ },
+ examples: [
+ {
+ name: 'Emit every click made on the HTML page',
+ code: `
+ import { fromEvent } from 'rxjs/observable/fromEvent';
+
+ const clicks = fromEvent(document, 'click');
+ clicks.subscribe(x => console.log(x.clientX));
+
+ /*
+ Example console output
+
+ 131
+ 157
+ 162
+ 162
+ 206
+ 315
+ 203
+ 231
+ 355
+
+ */
+
+ `,
+ externalLink: {
+ platform: 'JSBin',
+ url: 'http://jsbin.com/xegucig/2/embed?js,console,output'
+ }
+ },
+ {
+ name:
+ 'Emit every click made on the HTML page, but select only the clientX and clientY properties.',
+ code: `
+ import { fromEvent } from 'rxjs/observable/fromEvent';
+
+ const clicks = fromEvent(document, 'click', e => ({x: e.clientX, y: e.clientY}));
+ clicks.subscribe(x => console.log(x));
+
+ /*
+ Example console output
+
+ [object Object] {
+ x: 294,
+ y: 89
+ }
+ [object Object] {
+ x: 183,
+ y: 207
+ }
+ [object Object] {
+ x: 301,
+ y: 235
+ }
+ [object Object] {
+ x: 371,
+ y: 132
+ }
+
+ */
+
+ `,
+ externalLink: {
+ platform: 'JSBin',
+ url: 'http://jsbin.com/kaxalu/1/embed?js,console,output'
+ }
+ },
+ {
+ name:
+ 'Emit a click made on a div element and look at it through bubbling (bottom -> up) and capturing (top -> down).',
+ code:
+ `
+ import { fromEvent } from 'rxjs/observable/fromEvent';
+` +
+ /* tslint:disable:max-line-length */
+ ` document.body.innerHTML += '