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技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/673d8121-bf24-4c23-ba18-6d8b3c6ff0a4
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: