JavaScript文檔加載順序和事件綁定

為了保證網頁代碼層次清晰，便於管理，一般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效果就會讓用戶感覺失效了。

JavaScript核心概念及實踐 高清PDF掃描版 (邱俊濤) http://www.linuxidc.com/Linux/2014-10/108083.htm

理解JavaScript中的事件流 http://www.linuxidc.com/Linux/2014-10/108104tm