JavaScript案例分析:圖片庫改進版(2)
1.優化
showPic函式中裡仍存在一些需要處理的假設
①檢查title屬性是否存在,可以測試它是否為null
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
②檢查placeholder元素是否存在,但需要假設那是張照片。
nodeName屬性總是返回一個大寫字母的值,即使在HTML文件中是小寫字母
if(placeholder.nodeName!="IMG")return false;
③檢查description元素的第一個子元素是否為文字節點
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
④showPic()的完整程式碼
function showPic(whichpic){ if(!document.getElementById("placeholder")) return false; var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); if(placeholder.nodeName!="IMG") return false; placeholder.setAttribute("src",source); if(document.getElementById("description")){ var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):""; var description=document.getElementById("description"); if(description.firstChild.nodeType==3){ description.firstChild.nodeValue=text; } } return true; }
2.鍵盤訪問
links[i].onclick=function(){
return showPic(this)?false:true;
}
上面程式碼存在一個假定:使用者只會用滑鼠來點選這個連結。實際上,並非所有使用者都是使用滑鼠來瀏覽Web的。
下面我們將介紹用於處理鍵盤事件的onkeypress事件處理函式。
①onkeypress事件與onclick事件觸發同樣的行為
links[i].onclick=function(){
return showPic(this)?false:true;
}
links[i].onkeypress=function(){
return showPic(this)?false:true;
}
第二種方式:
links[i].onkeypress=links[i].onclick;
②小心onkeypress
然而onkeypress這個事件處理函式很容易出問題,使用者每按下一個按鍵都會觸發它。
而幾乎在所有的瀏覽器中,用Tab鍵移動到某個連結然後按下回車也會觸發onclick事件。
因此,最好不要使用onkeypress事件處理函式。onclick事件處理函式已經能滿足需要。雖然它叫“onclick”,但它對鍵盤的訪問的支援相當完美。
3.把JavaScript與CSS結合起來
在把內嵌事件處理函式移出標誌文件時,我們在文件裡為JavaScript程式碼留下了掛鉤
<ul id="imagegallery">
我們可以使用這個掛鉤用於css樣式表中:
①
#imagegallery li{
display:inline;
}
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>
4.DOM Core和HTML-DOM
①DOM Core:可以用來處理任何一種標記語言編寫出來的文件
getElementById
getElementsByTagName
getAttribute
setAttribute
② HTML-DOM:提供了許多描述各種HTML元素的屬性.
onclick
element.getAttribute("src") 等價於 element.src (這些方法與屬性互換)
③
同樣的操作可以只使用DOM Core也可以使用HTML-DOM來實現。通常HTML-DOM更短的。但是它們都只能用來處理Web文件。
placeholder.setAttribute("src",source);
// DOM Core
placeholder.src=source;
// HTML-DOM