首頁 > 開發者 > 網站開發

JS代碼的位置與事件響應代碼塊的封裝問題

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

JS代碼的位置      我們可以將JavaScript代碼放在html檔案中任何位置，但是我們一般放在網頁的head或者body部分。
   放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，然後才解析頁面的其餘部分。
  放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。
? 注意      Javascript作為一種指令碼語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先後順序的，所以前面的script就先被執行。

      比如進行頁面顯示初始化的js必須放在head裡面，因為初始化都要求提前進行（如給頁面body設定css等）；而如果是通過事件調用執行的function那麼對位置沒什麼要求的。

事件響應代碼塊的封裝★  事件響應代碼的不同封裝其頁面響應效果也有所不同△ 測試 1 放在標籤<head>中，或緊接著標籤<body>的下方 
 
    
  
  1. <script>
    2. 
  
  2.  /* document.onclick = function () {
    3. 
  
  3.  alert("You have clicked in the document!");
    4. 
  
  4.  };
    5. 
  
  5.  var img = document.getElementById("mainImage");
    6. 
  
  6.  img.onclick = function () {
    7. 
  
  7.  alert("You have clicked on the picture!");
    8. 
  
  8.  };*/
    9. 
  
    10. 
  
  10.  /* 若將document.onclick放在img onclick事件之前，那麼只會提示document的onclick */
    11. 
  
  11.  /* 若將img onclick放在document.onclick事件之前，那麼無任何提示*/
    12. 
  
  12. </script>
    13.
△ 測試 2 放在內容標籤之後 
 
    
  
  1. <body>
    2. 
  
  2. <img src="images/image.jpg" id="mainImage">
    3. 
  
    4. 
  
  4.  document.onclick = function () {
    5. 
  
  5.  alert("You have clicked in the document!");
    6. 
  
  6.  };
    7. 
  
  7.  var img = document.getElementById("mainImage");
    8. 
  
  8.  img.onclick = function () {
    9. 
  
  9.  alert("You have clicked on the picture!");
    10. 
  
  10.  };
    11. 
  
  11. //此時document.onclick與img.onclick的順序不影響執行結果
    12. 
  
  12. </body>
    13.

推薦做法（正確的姿勢...）       將事件響應代碼封裝為函數，然後在window.onload中完成掛接工作。 
 
    
  
  1. <script>
    2. 
  
  2.  function Demo() {
    3. 
  
  3.  document.onclick = function () {
    4. 
  
  4.  alert("You have clicked in the document!");
    5. 
  
  5.  };
    6. 
  
  6.  var img = document.getElementById("mainImage");
    7. 
  
  7.  img.onclick = function () {
    8. 
  
  8.  alert("You have clicked on the picture!");
    9. 
  
  9.  };
    10. 
  
  10.  }
    11. 
  
  11.  window.onload = function () {
    12. 
  
  12.  Demo();
    13. 
  
  13.  }
    14. 
  
  14.  </script>
    15.
這樣子，script的代碼塊無論在head中還是body中，或者是body的不同位置，最終的執行結果都是一樣的。



來自為知筆記(Wiz)

JS代碼的位置與事件響應代碼塊的封裝問題

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More