JavaScript文档载入顺序和事件绑定

版权声明：本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/guankle/article/details/25981865

为了保证网页代码层次清晰，便于管理。一般HTML中仅仅体现网页结构。详细的行为处理通过JS实现，样式则通过CSS文件管理。

在以上原则下通过JS实现行为时，一定要注意文档载入过程中，运行JS代码的时机。页面载入过程有两个事件，一是ready。表示文档结构已经载入完毕（不包括图片等非文字媒体文件），二是onload，指示页 面包括图片等文件在内的所有元素都载入完毕。（能够说：ready 在onload 前载入。）

（1） 一些待调用函数定义，要在调用前定义。

（2） 对于完好网页元素的JS。伴随文档载入运行。

（3） 而绑定元素事件响应的JS，则一定要等到对应元素载入后或文档所有载入完毕后再运行。否则无法找到元素。当然不可绑定事件。

对于第（3）种情况，利用JavaScript实现时代码例如以下。

window.onload = function(){ 
　　document.getElementById('id').addEventListener('click',func,false); //需定义响应函数func
} 

利用JQuery时可有两种写法。

$(function(){ 
　　$("#id").click(function(){ 
　　　　//adding your code here 
　　}); 
   $("#id").bind('dbclick', function(){ 
　　　　//adding your code here 
　　});
}); 
$(document).ready(function(){ 
　　$("#a").click(function(){ 
　　　　//adding your code here　　 
　　}); 
   $("#id").bind('dbclick', function(){ 
　　　　//adding your code here 
　　});
});

另外，须要注意的是，JS实现时，代码会在整个页面的document所有载入完毕以后运行。

不幸的这样的方式不仅要求页面的DOM tree所有载入完毕，并且要求所有的外部图片和资源所有载入完毕。更不幸的是，假设外部资源，比如图片须要非常长时间来载入，那么这个js效果就会让用户感觉失效了。