title: CustomEvent add property in dispatch and to be received in jquery listeners
body: <p>Is there a way to pass additional properties to the new event in native javascript without using the <code>detail</code> and can be received by jquery? Like this example. I would like the event to directly have the <code>namespace</code> property instead of passing inside the detail <code>detail: {namespace = ''}</code>. This will work with native js and native listeners.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var event = new CustomEvent('myEvent', {bubbles: true})
  event.namespace = "";
  
  var el = document.querySelector('span');
  
  el.addEventListener("myEvent", function(e){
    console.log("namespace is defined?", e.namespace !== undefined);
  });
  
  el.dispatchEvent(event)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The reason is some libraries I use uses jquery and it explicitly looks for the <code>namespace</code> prop. This will work also with jquery and its listeners.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var el = $('span');
  
  el.on("myEvent", function(e){
    console.log("namespace is defined?", e.namespace !== undefined);
  });
  
  el.trigger('myEvent');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span&gt;&lt;span&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, this will not work with native js but jquery listeners. The reason is listeners are written in the library with jquery, but I don't want to use jquery in my code to write the events.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var event = new CustomEvent('myEvent', {bubbles: true})
  event.namespace = "";
  
  var el = document.querySelector('span');
  
  $(el).on("myEvent", function(e){
    // I have no control inside here
    console.log("namespace is defined?", e.namespace !== undefined);
  });
  
  el.dispatchEvent(event)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there a way to solve this or I have to use jquery?</p>