title: javascript: document.dispatchEvent(CustomEvent) does nothing
body: <p>I have the following chunk of code</p>
  
  <pre><code>$(function(){
  
      var TaskEvent = new CustomEvent('TaskAdded',{
          detail: {
              message:'A task fue ponida, champion'
          },
          bubbles:true,
          cancelable:true
      });
  
      var btn = $("#boton");
  
      function HandleSugar(e){
          console.log(e.detail.message);
      }
  
      btn.click(function(e){
  
          document.dispatchEvent(TaskEvent);
      });
  
      $(document).on('TaskEvent',HandleSugar);
  
  })
  </code></pre>
  
  <p>When clicking in the button (#boton) nothing happens. Any idea?</p>
  
  <p>Some clarifications:</p>
  
  <ul>
  <li>The button is created, that is not the problem</li>
  <li>The console shows no error at all, that's why I'm lost</li>
  <li>The expected behavior is for the custom event 'TaskEvent' to be triggered, so when pressing the button the message will appear in console log.</li>
  </ul>