JavaScript addEventListener

Question

When I use addEventListener only once, like in the example file input, should I remove the listener as well with removeEventListener ? Or, if I know that I will not use any of that code anymore, then garbage collector will collect all the objects anyway?

Also, if I remove the event listener manually, will it speed up the garbage collector as it makes its job easier?

  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }

Answer 1

should I remove the listener as well with removeEventListener ?

That's entirely up to you. Unless you do, it will remain attached.

Or, if I know that I will not use any of that code anymore, then garbage collector will collect all the objects anyway?

Only if the FileReader is eligible for garbage collection. If reader isn't eligible for GC, then its handlers remain in memory.

Also, if I remove the event listener manually, will it speed up the garbage collector as it makes its job easier?

That will vary by implementation.

Note that with your example, you can't remove that handler. To remove it, you have to have a reference to it.

Here's an example actually removing it:

var file = document.querySelector('input[type=file]').files[0];
var reader;
var handler;
if (file) {
    reader  = new FileReader();
    handler = function () {
        preview.src = reader.result;

        // Remove this handler
        reader.removeEventListener("load", handler, false);
        reader = handler = null;
    };
    reader.addEventListener("load", handler, false);
    reader.readAsDataURL(file);
}

Note that we remove the reference to the handler both from the event handler list and from the handler variable, and we make sure to clear our reader variable as well so the reader is eligible for GC.

The above may well be overkill, though. Just clearing the reader should be sufficient:

var file = document.querySelector('input[type=file]').files[0];
var reader;
if (file) {
    reader  = new FileReader();
    reader.addEventListener("load", function () {
        preview.src = reader.result;

        reader = null;
    }, false);
    reader.readAsDataURL(file);
}

By release our reference to reader , we make the reader eligible for GC, which will also clean up its event handlers.

Answer 2

If you really use the listener and (ie the event) just once, it makes sense to remove the listener afterwards. In particular if you are somehow concerned about performance.

The garbage collection will not remove the listener, since it does not know if that event may occur again in the future. And because it would not remove the listener by itself, removing it manually does not speed up anything.

Removing it inside the event should be a quite clean solution.

Answer 3

1. It's not mandatory to unbind event handlers to events you don't use in the future but unbinding event manually will make a good solution/code.

2. JavaScript's garbage collection will take care of it and free up the reserved memory. It won't remove event listeners to DOM elements that may still have a reference to them in a detached DOM tree.