title: document.addEventListener vs. $(document).on
body: <p>I somehow found a bit strange behavior of adding eventlisteners to document. While adding listeners to HTMLElements works fine adding a listener to document doesn't work. But the strange thing is, that using jQuery makes it work.</p>
  
  <p>So can someone explain, why this two functions are not doing the exact same thing?
  </p>
  
  <pre><code>["customEvent1", "customEvent2"].forEach(
      (event: string) =&gt; {
          document.addEventListener(event, () =&gt; this.eventHandler());
      });
  
  $(document).on("customEvent1 customEvent2", () =&gt; this.eventHandler());
  </code></pre>
  
  <p>EDIT:
  Well it seams that there is some misunderstanding about the environment.</p>
  
  <ol>
  <li>The function is surrounded by a class</li>
  <li>I'm using TypeScript/ES6</li>
  <li>the EventHandler is a class method</li>
  <li>the custom event is triggered with <code>$(document).trigger("customEvent1")</code>;</li>
  </ol>