JavaScript addEventListener

Question

当我只使用addEventListener一次(如在示例文件输入中)时，是否也应该使用removeEventListener删除侦听器？或者，如果我知道我将不再使用这些代码，那么垃圾收集器会收集所有的对象吗？

另外，如果我手动删除事件侦听器，它是否会加快垃圾收集器的速度，因为它使其工作变得更容易？

  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

我是否也应该用removeEventListener删除侦听器？

这完全取决于你。除非你这么做了，否则它会一直附着在一起。

或者，如果我知道我将不再使用这些代码，那么垃圾收集器会收集所有的对象吗？

只有当FileReader有资格进行垃圾收集时。如果reader不符合GC的条件，那么它的处理程序将保留在内存中。

另外，如果我手动删除事件侦听器，它是否会加快垃圾收集器的速度，因为它使其工作变得更容易？

这将因执行情况而异。

请注意，对于您的示例，您不能删除该处理程序。要删除它，您必须有一个参考它。

下面是一个实际删除它的示例：

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);
}

请注意，我们从事件处理程序列表和handler变量中移除对处理程序的引用，并确保清除reader变量，以便读取器有资格使用GC。

不过，上述情况可能有些过火。仅仅清除reader就足够了：

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);
}

通过发布对reader的引用，我们使读者有资格获得GC，这也将清理它的事件处理程序。

Answer 2

如果您真正使用侦听器并(即事件)只使用一次，那么事后删除侦听器是有意义的。特别是如果你在某种程度上关心性能。

垃圾回收不会删除侦听器，因为它不知道该事件是否会在将来再次发生。而且，由于它本身不会删除侦听器，手动删除它不会加速任何事情。

在事件中删除它应该是一个非常干净的解决方案。

Answer 3

1. 不强制将事件处理程序绑定到将来不使用的事件，但是手动解除绑定事件将是一个很好的解决方案/代码。
2. JavaScript的垃圾收集将处理它并释放保留的内存。它不会将事件侦听器移除到DOM元素，而DOM元素在独立的DOM树中可能仍然有引用。