Removing event listener when using inline anonymous function

Question

In a simple game-app, I'm trying to pass the anonymous event-callback function some arguments. I could only do it using an anonymous function since it fits into the context (its scope identifies the arguments). The problem is that the game has an option to restart. After restarting, it adds to the same nodes new event Listeners, and here as you may guess the old event-listeners are still there, which results in an improper functionality and overloaded app. The solution I could think of is to "refresh" by removing the old eventListeners before adding the new ones. But I could not find any way considering the event-callback function is anonymous!

So, what could be an alternative solution?

var adder = function(colorBox, num){
    colorBox.addEventListener('click', function(){
        eventCall(this, num);
    });
}

var eventCall = function(t, num){
        var clickedBox = t.style.backgroundColor;
....

Look at this workaround to remove the event listener from colorBox - stackoverflow.com/questions/19469881/… — vabii
– vabii, Commented May 10, 2017 at 18:23
I tried it.., I do guess it has some downsides.., which makes it not helpful at all. — Profess Physics
– Profess Physics, Commented May 10, 2017 at 18:26

adeneo · Accepted Answer · 2017-05-10 18:33:13Z

3

You can store the function somewhere, so you can reference it later when removing. Using an array, you can store multiple event handlers without them being overwritten by several calls to the adder function, and then have a function that removes all of them etc, something like :

function eventCall(t, num) {
  var clickedBox = t.style.backgroundColor;
}

var fns = [];

function adder(colorBox, num) {
  function fn() {
    eventCall(this, num);
  }

  colorBox.addEventListener('click', fn);

  fns.push(fn);
}

function remover(colorBox) {
  fns.forEach(function(fn) {
    colorBox.removeEventListener('click', fn);
  });
}

edited May 10, 2017 at 18:33

answered May 10, 2017 at 18:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Profess Physics Over a year ago

Thank you for helping me out.

Guybrush · Accepted Answer · 2017-05-10 18:24:10Z

0

You can remove your event handlers via jQuery by using the off function (http://api.jquery.com/off/). For example

$( "p" ).off();

removes all event handlers from all paragraphs. So if you classify all your dom elements with a specific class, it is still possible.

answered May 10, 2017 at 18:24

Guybrush

7388 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:33Z

0

You can remove all event listeners on an element by using the outerHTML property.

colorBox.outerHTML = colorBox.outerHTML;

Setting the outerHTML property to itself will remove any attached event listeners and allow you to start fresh with any new listeners you want to attach.

More information on this method can be found here:

https://stackoverflow.com/a/32809957/5463636

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered May 10, 2017 at 18:26

freginold

3,9603 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Removing event listener when using inline anonymous function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related