<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>

標(biāo)準(zhǔn)的創(chuàng)建event方法:

var event = new Event('build');

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

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

當(dāng)需要自定義數(shù)據(jù)的創(chuàng)建event時(shí),使用CustomEvent():
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
其中屬性還有bubbles,cancelable等等
具體可以參照MDN介紹https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent

過時(shí)的創(chuàng)建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));