1.Javascript 預留退路
先來看這樣的一段Html代碼
<head runat="server">
<title></title>
<script type="text/javascript">
function showPic(url) {
var img = document.getElementById("img");
img.setAttribute("src", url);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li><a href="javascript:showPic('images/akali.jpg');" title="akali">akali</a></li>
<li><a href="javascript:showPic('images/alist.jpg');" title="alist">alist</a></li>
<li><a href="javascript:showPic('images/amumu.jpg');" title="amumu">amumu</a></li>
<li><a href="javascript:showPic('images/anni.jpg');" title="anni">anni</a></li>
<li><a href="javascript:showPic('images/xiaopao.jpg');" title="xiaopao">xiaopao</a></li>
</ul>
<img id="img" alt="img" src="" style=" width:600px;" />
</div>
</form>
</body>提問：如果Javascript功能被禁用了怎麼辦？
在上面的例子中，如果我們把鏈接都寫成了以上這樣，那麼它們在不支持或禁用了Javascript功能的瀏覽器裏將毫無用處，當然，如果把以上的鏈接寫成下面這樣也是比較多見的，同樣在不支持或禁用了Javascript功能的瀏覽器裏將毫無用處。
<li><a href="#" onclick="showPic('images/xiaopao.jpg')" title="xiaopao">xiaopao</a></li>爲了能讓我們所寫的Javascript能在不支持或禁用了Javascript功能的瀏覽器裏發揮作用，我們就應該考慮Javascript預留退路的問題了。
其實很簡單，將以上代碼改寫成這樣就可以了，雖然沒有達到我們預想的效果，但是不至於我們會看不到圖片的存在。
<head runat="server">
<title></title>
<script type="text/javascript">
function showPic(url) {
var img = document.getElementById("img");
img.setAttribute("src", url);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li><a href="images/akali.jpg" title="akali" onclick="showPic('images/akali.jpg');return false;">akali</a></li>
<li><a href="images/alist.jpg" title="alist" onclick="showPic('images/alist.jpg');return false;">alist</a></li>
<li><a href="images/amumu.jpg" title="amumu" onclick="showPic('images/amumu.jpg');return false;">amumu</a></li>
<li><a href="images/anni.jpg" title="anni" onclick="showPic('images/anni.jpg');return false;">anni</a></li>
<li><a href="images/xiaopao.jpg" title="xiaopao" onclick="showPic('images/xiaopao.jpg');return false;">xiaopao</a></li>
</ul>
<img id="img" alt="img" src="" style="width: 600px;" />
</div>
</form>
</body>2.Javascript分離
<li><a href="images/xiaopao.jpg" title="xiaopao" onclick="showPic('images/xiaopao.jpg');return false;">xiaopao</a></li>結合前面所提到的，把鏈接對應的事件插入到Html文檔裏面，這顯然不符合JavaScript分享的原則，我們應該將對應的事件添加的工作放到外部文件中去，那樣才能讓Html看起來沒有那麼多的“雜質”，如：
<li><a href="images/xiaopao.jpg" title="xiaopao">xiaopao</a></li>那麼，就是想辦法把對應的事件放到外部文件當中去，即把對應的onclick事件關聯到鏈接上面。
如下是修改過後的文檔：其中在ul上添加了一個唯一Id：ullist
<head runat="server">
<title></title>
<script src="javascript/myjs.js" type="text/javascript">
</script>
<script type="text/javascript">
addLoadEvent(prepare);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="ullist">
<li><a href="images/akali.jpg" title="akali">akali</a></li>
<li><a href="images/alist.jpg" title="alist">alist</a></li>
<li><a href="images/amumu.jpg" title="amumu">amumu</a></li>
<li><a href="images/anni.jpg" title="anni">anni</a></li>
<li><a href="images/xiaopao.jpg" title="xiaopao">xiaopao</a></li>
</ul>
<img id="img" alt="img" src="" style="width: 600px;" />
</div>
</form>
</body>下面是myjs.js
function showPic(pic) {
if (!document.getElementById("img")) return true;
var url = pic.getAttribute("href");
var img = document.getElementById("img");
if (img.nodeName != "IMG") return true;
img.setAttribute("src", url);
return false;
}
function prepare() {
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
if (!document.getElementById("ullist")) return false;
var ullist = document.getElementById("ullist");
var links = ullist.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
return showPic(this);
}
}
}
function addLoadEvent(func) {
var oldload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
oldload();
func();
}
}
}在上面的JavaScript中，添加了一些必要的檢查，心確保一些不理解這些函數的瀏覽器不去執行這些方法，即我們在日常編寫Javascript的過程當中，不要做太多的假設，比如：假設頁面上存在id爲img的對象，假設頁面上存在id爲ullist的對象等....