JavaScript的事件綁定(方便不支援js的時候)_javascript技巧

首先，例如我們使用JavaScript來加強我們的網頁，但我們要考慮到，如果使用者的瀏覽器不支援JavaScript，或是使用者disable了JavaScript的功能，那我們的網頁能不能正常顯示呢？例如下面的例子，

複製程式碼 程式碼如下:

其中popUp這個函數是自訂的，新開啟一個視窗來限制URL中的網頁。但是如果當客戶端不支援時，那麼這個網頁就無法正常運作了。所以我們在這樣做的使用，也考慮到更多，使用以下的程式碼就會顯得更合適。

複製程式碼 程式碼如下:

 

接著，作者以CSS為例子。在我們使用CSS的過程中，我們發現，除了我們使用了把CSS文件給加載進來外，我們沒有在我們的網頁內容中加入任何css相關的程式碼，這樣就能很好的把structure和style分開了，也就是我們的css的程式碼沒有侵入我們的主要程式碼裡面。這樣就算客戶端不知道css，但是我們的主要內容客戶還是可以看到的，我們的內容結構也能在客戶那裡顯示出來。所以JavaScript相當於behavior層，css相當於presentation層。 JavaScript也能像CSS一樣做到沒有侵入性。下面是書上的一個例子。

複製程式碼 程式碼如下:

上面這段程式碼已經能保證在客戶端不支援JavaScript的情況下仍然可以正常的工作，但是上面的程式碼中出現了onclick這樣的event handler。所以現在我們使用像CSS中的方式來完成我們所要的功能。如下：

複製程式碼 程式碼如下:

這樣，我們可以在這個頁面載入完成的時候，執行window.onload中，來偵測哪些是使用了class，然後統一使用popUp的方法。如下碼

複製程式碼 程式碼如下:

var links = document.getElementsByName(MgetElementsByName("a);
for (var i=0 ; i if (links[i].getAttribute("class") == "popup") {
  links[i]. onclick = function() {
   popUp(this.getAttribute("href"));  //Attention use this in  this place. Because this is equals onClick = "popUp(this.href)"/ we cann't use links[i].
   return false;
  }
 }
}

這樣就能更少地侵入我們html程式碼了。

  最後，作者講了我們要做到向後相容和JavaScript的最小化。向後相容，我們可以使用類似if(document.getElementById)來測試這個方法時候存在，存在了才能使用。 JavaScript程式碼的最小化主要是為了減少JavaScript，這樣能加快我們網頁的載入。

  下面我在看書的時候碰到不懂的問題，希望大蝦們能幫忙解決一下。

   對於<script>應該放在哪裡？ JavaScript DOM程式設計藝術中所說的，我們可以把<script>放在</script>