title: RxJS, why does fromEvent() register a new event for each subscription?
body: <p>Let's say we have following code</p>
  
  <pre><code>const clickEvent$ = fromEvent(document, 'click').pipe(
      pluck('target')
  );
  
  clickEvent$.pipe(
      filter(node =&gt; node.id === 'button1')
  ).subscribe(() =&gt; {
      console.log('Button 1 clicked!');
  });
  
  clickEvent$.pipe(
      filter(node =&gt; node.id === 'button2')
  ).subscribe(() =&gt; {
      console.log('Button 2 clicked!');
  });
  </code></pre>
  
  <p>When I look at the registered events in debugger I see that there are two click events registered on the document. When in increase number of subscriptions to <code>clickEvent$</code>, the number of events registered to document also increases with each subscription.</p>
  
  <p><a href="https://i.stack.imgur.com/z5lei.png" rel="nofollow noreferrer">debugger screenshot</a></p>
  
  <p>In comparison the code below only registers one event no matter how many cases I add to <code>switch</code> statement.</p>
  
  <pre><code>document.addEventListener('click', (event) =&gt; {
      switch (event.target.id) {
          case 'Button1':
              console.log('Button 1 clicked!');
              break;
          case 'Button2':
              console.log('Button 2 clicked!');
              break;
      }
  });
  </code></pre>
  
  <p>So my question is :-</p>
  
  <ul>
  <li>Why does each subscription to clickEvent$ (or any DOM Event Stream) add a new event to document.</li>
  <li>How does it affect performance when there 100 or more subscriptions</li>
  <li>Is there a way around this to have only one event listener added to documen.</li>
  </ul>
  
  <p>Here's what I know about Hot and Cold observables </p>
  
  <ul>
  <li>All observable sequences created from DOM events are Hot and shared by default.</li>
  <li>In case of a Hot observable, subscribers only start receiving events from the time of subscription. Whereas in case of a cold observable subscribers receive all events that the observable can produce.</li>
  <li><code>share()</code> operator can be used to make a cold observable hot.</li>
  </ul>
  
  <p>Thanks!</p>