Cross Browser compatible CustomEvent
<p>I need to create a Custom Event which will pass some data to the event listener. I already created one like below</p>
<p><strong>CustomEvent</strong></p>
<pre><code>var event = new CustomEvent('store', { 'detail': obj });
document.getElementById(&quot;Widget&quot;).dispatchEvent(event);
</code></pre>
<p><strong>Listener</strong></p>
<pre><code>document.getElementById(&quot;Widget&quot;).addEventListener('store', function (e) {
  console.log(e.detail);
  document.getElementById(&quot;result&quot;).innerHTML = e.detail.name+&quot;&lt;br&gt;&quot;+e.detail.address;
}, false);
</code></pre>
<p>It is working fine in browsers such as Chrome and Firefox but not working in IE11. I am getting an error in IE:</p>
<blockquote>
<p>Object doesn't support this action</p>
<p>CustomEvent is not working in IE.</p>
</blockquote>
<p>How can I make this cross-browser compatible ? I don't want to use jQuery <code>trigger()</code> because the <code>Listener</code> might not be in a page having jQuery</p>