CODEWITHSUNDEEP
javascriptevent-handling
Max
Max

Reputation: 11

Event not getting removed from window

I am having hard time removing event from window and I am not able to figure out why is it not working. I have a function in which I am adding an event to window.

Test.prototype.func1 = function(){
    this.func2 = function(){
      // do something
    };

    window.addEventListener("event1", this.func2, true);
};

Now I have an exit function (which is called when I exit that particular tab), from where I am calling detachEvent(), in which I am removing my event from window.

Test.prototype.exit = function(){
    this.detachEvent();
}

And my detachEvent function is 

Test.prototype.detachEvent() = function(){
    window.removeEventListener("event1", this.func2, true);
}

Now the problem arises because my code is part of a larger project and somehow func1 is being called twice. So event1 is being added twice to window. So to not have duplicate event I even tried calling detachEvent() before adding event to window like 

Test.prototype.func1 = function(){
    this.func2 = function(){
      // do something
    }
    this.detachEvent();
    window.addEventListener("event1", this.func2, true);
}

But the event is not getting removed when detachEvent() is getting called from inside func1(), but it is working when detachEvent() is getting called from exit().

My code works in cases where event is not added twice but here its not working. I am not able to figure out the reason and any help will be much appreciated.

Upvotes: 0

Views: 53

Answers (4)

Bergi
Bergi

Reputation: 665256

You need to remove the old func2 handler. You've already overwritten it when you're calling detachEvent from func1, so it tries to remove a function that was never installed, without affecting the event handler.

Test.prototype.func1 = function() {
  this.detachEvent(); // move here!
  this.func2 = function(){ … };
  window.addEventListener("event1", this.func2, true);
}

Alternatively, don't assign func2 inside func1, but initialise the property once in the constructor (or even make it a prototype method). That way, addEventListener even won't register the same function twice.

Upvotes: 1

genife
genife

Reputation: 24

change the listener to you action:

old:

youobject.addeventListener('something',unknownfunction);

use this is better:

youobject.event1 = function {
    //you code here
}

this automatically clear and set the listener.

Upvotes: 0

Raj
Raj

Reputation: 505

Looking at your code I can see the problem is 'this.func2' is assigned inside 'Test.prototype.func1' so when you call function 'func1' again and again it just re-assigning 'func2' again and again. The best way to fix this issue is,

func1 

Test.prototype.func1 = function(){
  this.detachEvent();
  window.addEventListener("event1", this.func2, true);
}

exit

Test.prototype.exit = function(){
       this.detachEvent();
}

detachEvent

Test.prototype.detachEvent = function(){
    window.removeEventListener("event1", this.func2, true);
}

func2

Test.prototype.func2 = function(){
     // do something
}

Upvotes: 1

Austio
Austio

Reputation: 6095

If you only want the event to be added a single time you need to set a flag to prevent it from being added again. Something like.

Test.prototype.func1 = function(){
  if (this._func2added) return;
  this._func2added = true;

  this.func2 = function(){
     // do something
  }

  window.addEventListener("event1", this.func2, true);
}

And on your detach release the flag on that.

Upvotes: 0

Related Questions