js创建和触发自定义的events事件

 <form>
        <textarea></textarea>
      </form>
 <script>
          const form = document.querySelector('form');
const textarea = document.querySelector('textarea');

// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
const eventAwesome = new CustomEvent('awesome', {//自定义事件,并且冒泡
  bubbles: true,
  detail: { text: () => textarea.value }//用detail属性来传值
});

// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener('awesome', e => console.log(e.detail.text()));

// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
      </script>

标准的创建event方法:

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

当需要自定义数据的创建event时,使用CustomEvent():
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
其中属性还有bubbles,cancelable等等
具体可以参照MDN介绍https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent

过时的创建event方法:

var event = document.createEvent('Event');
// Define that the event name is 'build'.
event.initEvent('build', true, true);
// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener('build', e => console.log(e.target.value));

// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener('input', e => e.target.dispatchEvent(event));