javascript - 事件和 DOM 元素

Question

假设我有一个包含两列布局的页面，其中左列是一组链接，单击该链接时它会在右列中加载关联的 html 页面/模板。

加载模板后，有一个模板处理程序通过 requirejs 初始化为单例，它定义了一些方法和处理程序，例如:

SomePage.prototype.saveHandler: function(e) { ... }; // Page handler has a handler

SomePage.prototype.initialize: function() {
    $('#btnSave').on('click', saveHandler);
}

然后，我在每次加载页面时通过初始化方法附加 DOM 事件。

SomePage.initialize(); // This attaches the click event

现在，当我单击左侧的另一个链接时，会加载一个不同的模板页面，并为该页面重复上述过程。

我想知道之前附加到 btnSave 元素的点击事件发生了什么？它现在是 jQuery 缓存中的悬空事件处理程序吗？

如果我在同一页面再次加载时尝试删除它，它是否真的会删除原始事件？

$('#btnSave').off('click', saveHandler);

执行以下 block 是否可以防止内存泄漏/悬挂引用？

// The potential problem here is that btnSave is part of the newly loaded template 
// and not the element i attached the handler to earlier (which doesn't exist anymore)
$('#btnSave').off('click', saveHandler);

$('#btnSave').on('click', saveHandler); 

确保我不会遇到悬空引用和内存泄漏的最佳方法是什么。这也是纯 JavaScript 的一个潜在问题。我的理解是，刷新模板页面时，上述内容将不起作用。与此同时，我将对其进行试验，但很高兴知道专家们是如何处理这个问题的。

Answer 1

看看这张来自 javascript 大师 Andy Osmani 的幻灯片。你会在这里找到关于内存泄漏和循环引用的答案: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass