[TOC]javascript
該示例支持平穩退化 目前他們仍是混合在一塊兒,咱們要找到一種掛鉤把他們關聯起來。 咱們能夠爲ui設置一個IDcss
<ul id=""imagegallery">
####2.添加事件處理函數 編寫一個簡單的函數把有關操做關聯到onload上,命名爲prepareGalleryjava
a. 檢查點node
if (!getElementById || !getElementByTagName) return false;
能夠進行更針對性的寫法,將函數處理連接設置爲imagegallery連接。這是預防性措施,即便從網頁上刪除圖片庫也不用擔憂出錯。不該該讓javascript對網頁有依賴。數組
if(!document.getElementById("imagegallery"){ return false; }
出於可讀性考慮,咱們將測試集中開頭瀏覽器
fuction prepareGallery(){ if (!document.getElementByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; }
b. 變量名有什麼 用gallery變量簡化函數
var gallery=document.getElementById("imagegallery");
將數組賦值給變量links測試
var links=gallery.getElementByTagName("a");
prepareGallery函數目前的樣子優化
fuction prepareGallery(){ if (!document.getElementByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var gallery=document.getElementById("imagegallery"); var links=gallery.getElementByTagName("a"); }
c. 遍歷 for循環遍歷ui
for ( var i=0; i<links.length; i++){}
d. 改變行爲
links[i].onclick = function(){ showPic(this); return false; }
d. 完成javascript函數
fuction prepareGallery(){ if (!document.getElementByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var gallery=document.getElementById("imagegallery"); var links=gallery.getElementByTagName("a"); for ( var i=0; i<links.length; i++){ links[i].onclick = function(){ showPic(this); return false; } } }
若在文檔加載以前執行腳本,DOM不完整,測試的準確性無從談起。所以在網頁加載完畢後當即執行,咱們把事件與onload關聯起來
window.onload= prepareGallery;
若是有兩個函數,firstFunction和secondFunction。逐一綁定,只有最後一個函數會被執行,能夠建立一個匿名函數解決這個問題
window.onload = function(){ fistFunction(); secondFunction(); }
還有一種彈性最佳解決方案 用addLoadEvent函數
function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else{ window.onload = function(){ oldonload(); func(); } } }
將頁面加載執行的函數建立一個隊列。把函數添加隊列中
addLoadEvent(fistFunction); addLoadEvent(secondFunction);
在以前showPic函數中,沒有進行任何檢測。 showPic函數有prepareGallery調用,在prepareGallery中已經檢測了getElementById和getElementByTagName。在showPic中並無檢查placeholder和description函數。 進行操做只有placeholder圖片存在,即便description不存在也能夠替換圖片。 下面是showPic添加檢查以後的代碼
functions showPic (whichpic){ if (document.getElementById("placeholder") return false; var source = getAttribute("href"); var placeholder = document.getElementById("placeholder")l placeholder.setAttribute("src", source); if (document.getElementById("description")){ var text = getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; } return true; }
如今即便沒有placeholder圖片也不會出現任何問題,有一個問題,若是把placeholder圖片從標記文檔中刪除,不管咱們點擊圖片庫裏哪一個連接都不會有反應 意味腳本不支持平穩退化。 問題在於prepareGallery假設,showPic函數正常返回,取消了onclick的默認行爲,應該有showPic函數決定 咱們應該驗證showPic返回值
links[i].onclick = function(){ return !showPic(this); }
showPic返回true,那咱們就返回false,瀏覽器不會打開那個連接 showPic返回false,那咱們就返回true,認爲圖片沒有更新,打開連接
showPic函數中仍然有須要處理的假設,title屬性值
if whichpic.getAtteibute("title"){ var text = whichpic.getAttribute("title"); }else { var text = ""; }
用三元操做符處理
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
檢測placeholder存在,假設是一張圖片,能夠用nodeName屬性進行測試 注意nodeName屬性老是返回一個大寫字母值
if (placeholder.nodeName != "IMG") return false;
下面是加了幾項檢查後的showpic函數
functions showPic (whichpic){ if (document.getElementById("placeholder") return false; var source = getAttribute("href"); var placeholder = document.getElementById("placeholder")l 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; }
按回車鍵觸發點擊,會觸發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 在幾乎全部的瀏覽器中,用tab鍵移動,回車鍵點擊也會觸發onclick onclick和onkeypress結合會致使不少問題 下面是最終的shoePic函數和prepareGallery函數
fuction prepareGallery(){ if (!document.getElementByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var gallery=document.getElementById("imagegallery"); var links=gallery.getElementByTagName("a"); for ( var i=0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this) ? false : true; } } } functions showPic (whichpic){ if (document.getElementById("placeholder") return false; var source = getAttribute("href"); var placeholder = document.getElementById("placeholder")l 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; }
把圖片連接換成縮略圖css也一樣有效
var source = whichpic.getAttribute("href"); var source = which.href;
placeholder.setAttribute("src", source); placeholder.src = source;
第一行爲DOM Core 第二行爲HTML-DOM