[Vuejs]-Best way to incorporate vanilla event listeners on multiple components

by

1👍

✅

In my opinion, you shouldn’t use native events for this case. Also adding an event listener over the document on an specific Vue component, could lead to confusions, since you’re always listening to that event everywhere (in your case, "esc" key being pushed). Imagine if you have a large number of components and when you push "esc", some code is being executed. If you’re not the author of this piece of code, it’s "hard" to tell from where it comes.

For this case I would recommend: using a Mixin that could contain the lifecycle hooks (vue 2) or using a composable for importing the function (vue 2 with vue/composition-api or vue 3) and manually registering it with the proper lifecycle hook function.

BTW, on your code, on the remove event listener part, you should pass the function reference. So it would be better to extract the method to a proper vue method of that component.

mounted() {
    let that = this;
    document.addEventListener("keyup", this.close);
    document.addEventListener("dblclick", this.close2);
  },
  unmounted() {
    window.removeEventListener("keyup", this.close);
    window.removeEventListener("dblclick", this.close2);
  },
  methods: {
    close(evt) {
      if (evt.key === "Escape") {
        this.$emit("input");
      }
    },
    close2(e) {
      if (e.target == document.getElementsByClassName("v-overlay__scrim")[0]) {
        this.$emit("input");
      }
    },

  },
👤nachodd

Leave a comment