js自定义事件CustomEvent和dispatch

js自定义事件CustomEvent和dispatch

用CustomEvent和dispatch来模拟一个vue的emit方法

<script type="text/javascript">
    window.vue = {
      eventNameObx: {}
    }
    window.vue.on = function(eventName, callback) {
      window.addEventListener(eventName, (evt) => {
        callback(evt)
      })
    }
    window.vue.emit = function(eventName, options) {
      if (!vue.eventNameObx[eventName]) {
        vue.eventNameObx[eventName] = new CustomEvent(eventName, {
          detail: options
        })
      }
      // 随后在对应的元素上触发该事件
      if(window.dispatchEvent) {  
          window.dispatchEvent(vue.eventNameObx[eventName]);
      } else {
          window.fireEvent(vue.eventNameObx[eventName]);
      }
    }
  </script>
  <script type="text/javascript">
    vue.on('abc', (evt) => {
      console.log('abc ===== ', evt.detail)
    })

    setTimeout(() => {
      window.vue.emit('abc', {emitoption: 33333})
    }, 5000)
  </script>