假设我有一个包含两列布局的页面，其中左列是一组链接，单击该链接时它会在右列中加载关联的 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 的一个潜在问题。我的理解是，刷新模板页面时，上述内容将不起作用。与此同时，我将对其进行试验，但很高兴知道专家们是如何处理这个问题的。
最佳答案
看看这张来自 javascript 大师 Andy Osmani 的幻灯片。你会在这里找到关于内存泄漏和循环引用的答案: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass
关于javascript - 事件和 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25611540/