vue通过new Event实现的自定义事件如何清除避免重复执行

最近在做项目的时候需要给插件实现一个回调方法，正常的方式没法实现，只能通过监听浏览器缓存来实现，了解到js本身是可以通过自定义事件来实现的，平常我们熟悉的click，scroll等等其实就是浏览器本身已经实现的事件，那么如何实现自定义事件呢，比如自定义一个事件customEevent，正常可以通过new Event("customEevent");然后通过window.dispatchEvent来触发这个事件即可。

以下代码供餐看，有两个地方需要特别注意，第一个在页面销毁前一定要销毁同名的自定义方法，否则再次打开这个页面会再次注册，导致回调方法执行多次。第二个销毁的方法名跟时间名必须是同一个，即addEventListener跟removeEventListener的方法名要一致，否则会出现销毁失效的问题

<template>
  <div class="login"></div>
</template>

<script>
export default {
  data() {
    return {cb: null,eventName:null};
  },
  mounted() {
    this.addEvent(this.callBackFunc);
  },
  created() {},
  methods: {
    callBackFunc: function () {
      console.log("这个回调方法");
    },
    addEvent(cb) {
      this.cb =  cb
      this.eventName =  new Date().getTime()
      var orignalSetItem = localStorage.setItem;
      let _this = this
      localStorage.setItem = function (key, newValue) {
        var setItemEvent = new Event(_this.eventName);

        setItemEvent.newValue = newValue;
        setItemEvent.newValuekey = key;

        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this, arguments);
      };

      window.addEventListener(this.eventName,this.cb);
    },
  },
  beforeDestroy() {
    window.removeEventListener(this.eventName, this.cb);
  },
};
</script>

本文章由javascript技术分享原创和收集