Firefox CustomEvent bug

Firefox CustomEvent dispatch skips form submit handler.

by Michelle Bu

HTML

<button id="custom-event-button">
  Submit CustomEvent form
</button>
<button id="create-event-button">
  Submit document.createEvent form
</button>

<br />
<br />

<form id="custom-event-form">
  <tt>I'm a CustomEvent form. I don't work in Firefox :(.</tt>
</form>
<br />
<form id="create-event-form">
  <tt>I'm a document.createEvent form.</tt>
</form>

CSS

input {
  width: 100%;
  height: 20px;
  font-size: 20px;
}

tt {
  display: block;
}

tt.result {
  color: green;
}

JavaScript

var customForm = document.querySelector('#custom-event-form');
var createForm = document.querySelector('#create-event-form');

var submitHandler = function(f) {
  return function(ev) {
    var node = document.createElement('tt');
    node.className = 'result';
    node.innerHTML = 'Submitted!';
    f.appendChild(node);
    ev.preventDefault();
  };
};

createForm.addEventListener('submit', submitHandler(createForm));
customForm.addEventListener('submit', submitHandler(customForm));

document.querySelector('#custom-event-button').addEventListener('click', function(ev) {
  var event = new CustomEvent('submit');
  customForm.dispatchEvent(event);
});
document.querySelector('#create-event-button').addEventListener('click', function(ev) {
  var event = document.createEvent('Event');
  event.initEvent('submit', true, true);
  createForm.dispatchEvent(event);
});