JS 自定义事件的方法

创建自定义事件的方式有两种：

• Event()
• CustomEvent()
  两者的区别是CustomEvent()的创建过程中可以传入第二个参数，该参数为对象，且该对象的属性只能写detail，否则获取不到该参数，详情请看下面代码。

方案一

<div class="custom-event" />

  const event = new Event('custom');
  let dom = document.querySelector('.custom-event');
  dom.addEventListener('custom', event => {
     console.log('打印了', event);
  });
  // 必须使用Dom元素将该事件分发出去，否则无法进行监听
  dom.dispatchEvent(event);

方案二

<div class="custom-event" />

  // 此处的第二个参数对象中必须使用detail属性，属性值可以任意写
  const event = new CustomEvent('custom', { detail: { language: 'JavaScript' } });
  let dom = document.querySelector('.custom-event');
  dom.addEventListener('custom', event => {
     console.log('打印了', event.detail); //  { language: 'JavaScript' }
  });
  // 必须使用Dom元素将该事件分发出去，否则无法进行监听
  dom.dispatchEvent(event);