歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

Copyright © Linux教程網 All Rights Reserved