JavaScript addEventListener

Question

當我只使用addEventListener一次時，就像在示例文件輸入中一樣，我是否應該使用removeEventListener刪除偵聽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刪除監聽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元素的事件偵聽器。