从DOMontentLoaded范围内加载函数

Question

jsfiddle

https://jsfiddle.net/ee7oe5pb/2/

Javascript

var events = (function () {
    var fn = {};
    fn.refresh = function(message) {
        alert(message);
    }
    return fn;
})();
var menu = (function () {
    var fn = {};
    fn.init = function(message) {
        events.refresh('Work from the function root'); // Work
        document.addEventListener("DOMContentLoaded", function() {
            events.refresh('Work from the domcontentloaded'); // Don't work
        });
    }
    return fn;
})();
menu.init();

问题

当运行menu.init时，它启动菜单初始化功能。它触发events.refresh功能，并通过消息发出警报。那部分做得很好。

events.refresh也在DOMContentLoaded作用域中被调用。这是在页面完全加载时触发的。现在events.refresh就是undefined function。为什么？我该如何避开它？

Answer 1

我不确定，但认为这个链接有助于您理解。它帮助了我。http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/

Answer 2

在浏览器上运行代码效果良好（不是在jsfiddle中）。

检查：

1） 确保events是否在全局上下文中声明

2） 尝试以"windows.events"的形式访问事件（在大多数浏览器中，"window.event"是保留的，所以也许你应该尝试使用其他var名称）

document.addEventListener("DOMContentLoaded", function() {
  window.events.refresh('Work from the domcontentloaded');
});

需要澄清的是，DOMContentLoaded在DOM构建完成后立即启动。若要在页面完全加载后进行处理，则需要使用"onload"。