title: Listen to jQuery event without jQuery
body: <p>Is there a way to set up an event listener, so it captures an event fired by jQuery? I want to use only plain (vanilla) JavaScript to listen to the event.</p>
  
  <p>I have set up the following example:</p>
  
  <pre><code>(function($) {
  
      $(document).on('sent_jquery_rec_jquery', function () {
          console.log('sent_jquery_rec_jquery');
      });
  
      $(document).on('sent_vanilla_rec_jquery', function () {
          console.log('sent_vanilla_rec_jquery');
      });
  
      document.addEventListener('sent_vanilla_rec_vanilla', function () {
          console.log('sent_vanilla_rec_vanilla');
      });
  
      document.addEventListener('sent_jquery_rec_vanilla', function () {
          console.log('sent_jquery_rec_vanilla');
      });
  
      document.dispatchEvent(new Event("sent_vanilla_rec_vanilla"));
      document.dispatchEvent(new Event("sent_vanilla_rec_jquery"));
  
      $(document).trigger('sent_jquery_rec_jquery');
      $(document).trigger('sent_jquery_rec_vanilla');
  
  }(jQuery));
  </code></pre>
  
  <p>Three events which are received and logged are:</p>
  
  <ul>
  <li>sent_vanilla_rec_vanilla</li>
  <li>sent_vanilla_rec_jquery</li>
  <li>sent_jquery_rec_jquery</li>
  </ul>
  
  <p>When the event is sent via <code>$(document).trigger</code>, the event listener set up with <code>document.addEventListener</code> does not kick in. What's the reason for that, and how can I make it work?</p>