Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

remove event listener in vue

i need to remove the event listener. i'm calling to some method from the function executed within the event listener, so i need to use to es6 syntax. i couldn't use named functions. how can i remove the event listener

methods :
    initCanvas : function(x, y, width, height) {
        //do something
    },
    some_method : function() {
        let svgObjectEl = // some logic will give the object elemenet embedding the svg
        svgObjectEl.addEventListener('load', () => {
            //let x,y,width, height has some value
            // some code here
            this.initCanvas(x, y, width, height);         
        });   
        svgObjectEl.removeEventListener('load', ??);
}
like image 984
Tomonso Ejang Avatar asked Dec 01 '17 17:12

Tomonso Ejang


People also ask

Does Vue remove event listener?

In Vue we can listen for the hook:beforeDestroy event on component instance, and pass a callback which will remove the event listener.

How do you destroy event listeners in Vue?

// You can use the destroy() method to remove the event listener. // The 'this' is bound automatically inside the listener somehow mounted() { window. addEventListener('scroll', this. handleScroll) }, destroyed() { window. removeEventListener('scroll', this.

How do I remove an event listener?

Using the removeEventListener() method The JavaScript built-in function removeEventListener() removes an event handler from an element for a connected event. For instance, you can use removeEventListener() to get rid of a click event listener if a button is disabled after one click.


1 Answers

Something like this maybe?

methods: {
  initCanvas (x, y, width, height) {
    //do something
  },
  some_method() {
    svgObjectEl.options = { x: 12, y: 13, … }
    svgObjectEl.addEventListener('load', this.listener)
  },
  listener(evt) {
    // some code here
    this.initCanvas(evt.target.options)
    svgObjectEl.removeEventListener('load', this.listener)    
  }
}
like image 180
François Romain Avatar answered Oct 25 '22 06:10

François Romain