How to add window.addEventListener and remove window.removeEventListener in Vue JS

user_481479 0
Viewed 3718

I want to add window.addEventListener in vue js file.

 window.addEventListener('message', (event) => {
  console.log(event, ' i am here');
 });

I have added this in mounted() function.

Now, I need to remove this in destroyed method but somehow I am not able to do it.

window.removeEventListener('message', (event) => {
  console.log(event, ' i am here');
});
vue.js javascript
3 Answers

Ok So I have created a fiddle that will show you how to remove and add the message handler and how to post message it's here:

new Vue({
  el: "#app",
  methods: {
    addHandler: function() {
        window.addEventListener('message', this.eventListenerExample);
    },
    removeHandler: function(){
        window.removeEventListener('message', this.eventListenerExample);
    },
    postMessage: function() {
        window.postMessage("This is a message ");
        },
    eventListenerExample: function(event){
        console.log(event, ' i am here');
    }
  },
  mounted: function () {
    this.addHandler();
    },
  destroyed: function() {
    this.remveHanlder();
  }
})

https://jsfiddle.net/ob1pLd7z/8/

Note here that the function is part of this vue instance and the function itself is added and removed rather than using an inline function like you originally showed.

user_33237330

I am happy to read that you want to clear/remove listener after component destroy

  mounted() {
    const listener = () => {}
    const event = 'message'
    window.addEventListener(event, listener)
    this.$once('hook:destroyed', () => {
      window.removeEventListener(event, listener)
    })
  }
user_127231270

You can use destroyed() or beforeDestroy() to remove the event listener.

To add event use mounted() like this,

mounted() {
    window.addEventListener('event', listener);
}

ex:

mounted() {
        window.addEventListener('keyup', this.navigateMovements);
    }

and in templates main div,

<div @event='listener($event)'>
......
......
......
</div>

ex:

<div @keyup='navigateMovements($event)'>
    ......
    ......
    ......
    </div>

To destroy the event

beforeDestroy() {
    window.removeEventListener('event', listener);
  }

ex:

beforeDestroy() {
        window.removeEventListener('keyup', this.navigateMovements);
      }

or use destroyed()

 destroyed() {
            window.removeEventListener('event', listener);
          }
user_148308590
Related