Ways to detach event listener in Vue Component

Question

Ways to detach event listener in Vue Component

One of my Vue2 components has a custom eventListener that I added in the mounted lifecycle hook. I am now trying to figure out the correct way to remove this listener when the component is destroyed.

<template>
    <div>
      ...
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
        window.addEventListener('click', (evt) => {
          this.handleClickEvent(evt)
        })
    },
    destroyed() {
      //   window.removeEventListener('click', ????);
    },
    methods: {
      handleClickEvent(evt) {
        // do stuff with (evt) 
      },
    },
  }
  </script>

javascript vue.js vuejs2 components vue-component

Answer 1

Answer №1

It is important to retain a reference to the click handler that has been registered, so that it can be removed later:

mounted() {
  this.clickHandler = () => { ... };
  window.addEventListener('click', this.clickHandler);
}

beforeDestroy() {
  window.removeEventListener('click', this.clickHandler);
}

However, if you already have a function named handleClickEvent defined in the component, there is no need to wrap it in an arrow function. You can directly use it as follows:

mounted() {
  window.addEventListener('click', this.handleClickEvent);
}

beforeDestroy() {
  window.removeEventListener('click', this.handleClickEvent);
}

In vue2, a handy feature allows for dynamic registration of a hook, enabling the addition and removal of the handler in mounted() without storing a reference within the component:

mounted() {
  const handler = () => { ... }; // local variable
  window.addEventListener('click', handler);
  this.$once('hook:beforeDestroy',
    () => window.removeEventListener('click', handler)
  );
}

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Programmatic-Event-Listeners

Answer 2

It is important to retain a reference to the click handler that has been registered, so that it can be removed later:

mounted() {
  this.clickHandler = () => { ... };
  window.addEventListener('click', this.clickHandler);
}

beforeDestroy() {
  window.removeEventListener('click', this.clickHandler);
}

However, if you already have a function named handleClickEvent defined in the component, there is no need to wrap it in an arrow function. You can directly use it as follows:

mounted() {
  window.addEventListener('click', this.handleClickEvent);
}

beforeDestroy() {
  window.removeEventListener('click', this.handleClickEvent);
}

In vue2, a handy feature allows for dynamic registration of a hook, enabling the addition and removal of the handler in mounted() without storing a reference within the component:

mounted() {
  const handler = () => { ... }; // local variable
  window.addEventListener('click', handler);
  this.$once('hook:beforeDestroy',
    () => window.removeEventListener('click', handler)
  );
}

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Programmatic-Event-Listeners

Answer 3

Answer №2

If you want to access the entire component using this.$el and handle the destroy event similarly to how you set it up, follow this approach:

Vue.component('Child', {
  template: `
    <div class="child">
      click for event
    </div>
  `,
  mounted() {
    this.$el.addEventListener('click', (evt) => {
      this.handleClickEvent(evt)
    })
  },
  beforeDestroy() {
    console.log('distroyed')
    this.$el.removeEventListener('click', (evt) => {
      this.handleClickEvent(evt)
    })
  },
  methods: {
    handleClickEvent(evt) {
      console.log(evt.currentTarget)
      // do stuff with (evt) 
    },
  },
})


new Vue({
  el: "#demo",
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    }
  }
})

.child {
  height: 150px;
  width: 200px;
  background: goldenrod;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
    <button @click="toggleShow">mount/unmount component</button>
    <Child v-if="show" />
  </div>
</div>

Answer 4

If you want to access the entire component using this.$el and handle the destroy event similarly to how you set it up, follow this approach:

Vue.component('Child', {
  template: `
    <div class="child">
      click for event
    </div>
  `,
  mounted() {
    this.$el.addEventListener('click', (evt) => {
      this.handleClickEvent(evt)
    })
  },
  beforeDestroy() {
    console.log('distroyed')
    this.$el.removeEventListener('click', (evt) => {
      this.handleClickEvent(evt)
    })
  },
  methods: {
    handleClickEvent(evt) {
      console.log(evt.currentTarget)
      // do stuff with (evt) 
    },
  },
})


new Vue({
  el: "#demo",
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    }
  }
})

.child {
  height: 150px;
  width: 200px;
  background: goldenrod;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
    <button @click="toggleShow">mount/unmount component</button>
    <Child v-if="show" />
  </div>
</div>

Ways to detach event listener in Vue Component

Answer №1

Answer №2

Similar questions

Is it possible to convert the text.json file into a jQuery animation?

Develop a COM API, or equivalent, tailored for a Node.js application

Unable to reset iframe style height in IE8 using JavaScript

Authenticating with passportjs using a Google Apps email address for verification

Transforming the unmanaged value state of Select into a controlled one by altering the component

Particles are not appearing when using the Three.js shader material

Repeating Elements with Angular and Utilizing a Touch Keyboard

How to download a dynamically generated PHP file to your local machine

Preventing touchstart default behavior in JavaScript on iOS without disrupting scrolling functionality

I am having trouble getting my JavaScript to load

Node receiving empty array as result after processing post request

"Mastering the art of running a successful Dojo

Tips for fixing the issue of "module ./response not found" in Node.js Express

Should a React application perform a complete refresh when a file is reloaded?

Is there a way to determine the size of an array following the use of innerHTML.split?

Switching between light and dark themes in a Next.js application with Ant Design v5 theme toggle

Reasons for the failure of file uploads from the React frontend to the backend system

Tips for cutting down on bundle size in your WEBPACK setup when using VUEJS

Looping through an array of nested objects using Vue

What is the best way to retrieve a JSON key in ReactJS?