Question

也许这是一个重复的问题，但我想问一下。

我想创建一个不使用第三方库的JS应用程序，以便在浏览器中学习JS事件。

所以我按照这样构建我的应用程序：

var APP = APP || (function (global) {
   return {
       digitsField: {},
       // other properties, methods
       init: function (config) {
          try {
              this.digitsField = global.getElementById('digitsField');
              return this;
          } catch (error) {
              console.log(error.message);
              return false;
          };
       }
   };
} (window.document));

我的html页面看起来像这样：

<!DOCTYPE html>
<html>
    <head> 
         <link rel="stylesheet" href="css/style.css">
         <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body onload="APP.init({});">
         <input type="text" value="0" class="textField" readonly="true" id="digitsField"/>
         // other html tags
    </body>
</html>

虽然我将window.document发送到我的立即函数，但是在加载页面或调用APP.init（）函数之前，仍未为其他工作定义digitsField标记。我还注意到在firebug中，在DOM选项卡中，有一个专用于onload事件的全局行，这会使全局命名空间变得混乱。也许有更好的方法可以在不使用window.onload事件或第三方库的情况下将APP.digitsField初始化为标记对象？

让我知道你的想法。

Answer 1

加载所有内容时，窗口onload事件将触发，包括外部资源。但是，您应该只需要等待DOM加载，因此您可以将处理程序附加到DOMContentLoaded事件：

document.addEventListener("DOMContentLoaded", function() {
    // code...
});

这应该适用于比IE8更新的浏览器（IE9及以上版本）。

Answer 2

如果您希望获得与DOM完全相同的好处，并且完全兼容浏览器，只需将代码移动到body元素的结束标记内。

e.g。

<body>
     <input type="text" value="0" class="textField" readonly="true" id="digitsField"/>
     // other html tags
     <script>
         APP.init({});
     </script>
</body>

否则考虑转移到jQuery及其DOM ready事件，该事件可以为您处理浏览器兼容性问题。

e.g。

$(document).ready(function(){
   APP.init({});
});

或快捷方式版本：

$(function(){
   APP.init({});
});

jQuery版本可以放在任何地方（标题，正文等）

我应该使用window.onload事件吗？

2 个答案: