Custom Event

by Artem

HTML

<div id="news">
  <form>
    <input type="text" id="newsInput">
    <input type="submit" id="newsSubmit">
  </form>

</div>

JavaScript

'use strict';

const form = document.forms[0];
const input = form.elements[0];
const submit = form.elements[1];

form.onsubmit = function(e) {
  e.preventDefault();
  const event = new CustomEvent('entry.add', {
    detail: {
      input: input.value
    }
  });
  document.dispatchEvent(event);
  input.value = '';
}

document.addEventListener('entry.add', function(e) {
  const div = document.createElement('div');
  div.innerText = e.detail.input;
  news.appendChild(div);
});