Consider the following code sample:

import R from 'ramda'; import {Observable} from 'Rx'; var allClicks_ = Observable.fromEvent(window, 'click').share(); var getClicks = function(klass) { return allClicks_.filter(e => { return R.contains(klass, e.target.classList); }); }; getClicks('red').subscribe(x => { render('RED: ' + x.target.className); }); getClicks('blue').subscribe(x => { render('BLUE: ' + x.target.className); });

Instead of adding click event listeners to ".red" and ".blue", I added an event listener to window and filtered events that are on ".red" and ".blue".

Now what can go wrong with code like this? Is it more (or less) efficient than adding event listeners to individual DOM nodes? Or it has no performance benefits?

Edit: Share the hot Observable so only one event handler is attached.