javascript - 从 DOMcontentLoaded 范围内加载函数

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”是保留的，所以也许你应该尝试使用其他变量名）

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

澄清一下，DOMContentLoaded在 DOM 完全构建后立即触发。如果要在页面完全加载后处理，则需要使用“onload”。