[RxJS] Using Observable.create for fine-grained control

Sometimes, the helper methods that RxJS ships with such as 

fromEvent

, 

fromPromise

 etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use 

Observable.create

 which allows you to project only the values which matter to you.

For example, the following code need add a filter method to filter the null value from the event.

const fromEvent    = Rx.Observable.fromEvent;

function delegate (wrapperSelector, elementSelector, eventName) {
  
  return fromEvent(
    document.querySelector(wrapperSelector),
    eventName,
    (ev) => {
      return ev.target.closest(elementSelector);
    }
  ).filter(x => x !== null)
}

delegate('.wrapper', 'button', 'click')
    .subscribe(x => {
document.querySelector('#output').textContent = `Button ${x.textContent} clicked`;
});      

We can use create method to do:

const create    = Rx.Observable.create;

function delegate (wrapperSelector, elementSelector, eventName){
  return create( (observe)=> {
    const wrapper = document.querySelector(wrapperSelector);
    const handler = (ev) => {
      const match = ev.target.closest(elementSelector);
      if(match) {
        return observe.onNext(match);
      }
    }
    
    wrapper.addEventListener(eventName, handler, false);
    
    // cancel the listener
    return ()=>{
      wrapper.removeEventListener(eventName, handler);
    }
  });
}