Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="trigger IE-compatible custom events">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
// for testing the event listener
document.addEventListener(
  'my-custom-event',
  function(evt) {
    var msg = 'event `' + evt.type + '` triggered';
    console.log(msg, evt.detail);
  }
);

// IE-compatible custom event creation function
function createCustomEvent(type, detail) {
  try {
    return new window.CustomEvent(type, { detail: detail });
  } catch (err) {
    const event = document.createEvent('CustomEvent');
    event.initCustomEvent(type, false, true, detail);
    return event;
  }
}

// IE-compatible dispatch function
function dispatchCustomEvent(type, detail) {
  const event = createCustomEvent(type, detail);
  document.dispatchEvent(event);
}

// dispatch events
dispatchCustomEvent('my-custom-event');
dispatchCustomEvent('my-custom-event', { x: 5 });
</script>


<script id="jsbin-source-javascript" type="text/javascript">// for testing the event listener
document.addEventListener(
  'my-custom-event',
  function(evt) {
    var msg = 'event `' + evt.type + '` triggered';
    console.log(msg, evt.detail);
  }
);

// IE-compatible custom event creation function
function createCustomEvent(type, detail) {
  try {
    return new window.CustomEvent(type, { detail: detail });
  } catch (err) {
    const event = document.createEvent('CustomEvent');
    event.initCustomEvent(type, false, true, detail);
    return event;
  }
}

// IE-compatible dispatch function
function dispatchCustomEvent(type, detail) {
  const event = createCustomEvent(type, detail);
  document.dispatchEvent(event);
}

// dispatch events
dispatchCustomEvent('my-custom-event');
dispatchCustomEvent('my-custom-event', { x: 5 });</script></body>
</html>