我应该使用 window.onload 事件吗

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

window onload 事件在加载所有内容（包括外部资源）时触发。但是，您应该只需要等待 DOM 加载，这样您就可以将处理程序附加到 DOMContentLoaded 事件：

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

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

Answer 2

如果您想获得与 DOM 相同的好处，并与 full-browser 兼容，只需将您的代码移至 body 元素的结束标记内。

例如

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

否则考虑移动到 jQuery 及其 DOM 就绪事件，它会为您处理浏览器兼容性问题。

例如

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

或快捷方式版本：

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

jQuery版本可以放在任何地方（header、body等）

我应该使用 window.onload 事件吗

Should I use window.onload event

html

javascript

javascript-events