gallery2
这是对昨天代码的改进版
1：兼顾到有的浏览器不支持JavaScript或者禁用的情况，所以在页面中a标签是有真实值得。
2：检测浏览器是否支持getElementsByTagName getElementById的情况，浏览器如果不支持则直接以图片链接的方式给返回。
3：将onclick事件从页面移动到JavaScript中，做到文档的结构和文档的行为分开。
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>image Gallery</title> <link rel="stylesheet" href="css/layout.css" media="screen"> </head> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <li><a href="images/a.jpg" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. ">test1</a></li> <li><a href="images/b.jpg" title="Autem repellendus itaquequi explicabo recusandae.">test2</a></li> <li><a href="images/c.jpg" title=" Quae commodi dolores numquam maxime. Alias, soluta!">test3</a></li> <li><a href="images/d.jpg" title="facere repudiandae, provident inventore." >test4</a></li> </ul> <img id="placeholder" src="images/e.jpg" alt="my image gallery"> <p id="description">choose an image.</p> <script type="text/javascript" src="javascript/showPic.js"></script> </body> </html>
JavaScript：
//主方法为改变图片src
function showPic(whichpic){
//验证浏览器是否符合getElementById方法
if(!document.getElementById("placeholder"))return false;
//获取a标签内图片的href
var source=whichpic.getAttribute("href");
//获取占位图片的Id
var placeholder=document.getElementById("placeholder");
//验证placeholder是否是图片标签
if(placeholder.nodeName!="IMG")return false;
//修改placeholder的src="href"
placeholder.setAttribute("src",source);
//图片的描述，即使图片描述不存在也应该能够执行函数
if(document.getElementById("description")){
//获得a节点title,事先进行判断，如果有则把值赋给text否则赋值空字符
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
//获得description节点
var description=document.getElementById("description");
//description的节点类型为3？进行赋值
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
}
return true;
}
//为a标签添加onclick事件
function prepareGallery(){
//判断浏览器是否能实现getElementsByTagName、和getElementById方法
if(!document.getElementsByTagName)return false;
if(!document.getElementById)return false;
//判断节点imagegallery是否存在
if(!document.getElementById("imagegallery")) return false;
//获取节点imagegallery再获取该节点下的所有a节点
var gallery=document.getElementById("imagegallery");
var links=gallery.getElementsByTagName("a");
//遍历a节点，为每个节点添加onclick事件
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
//控制浏览器不打开新的页面，因为如果showPic函数执行返回的是true
//浏览器将不打开新页面，否则浏览器按照默认形式打开链接
return showPic(this)?false:true;
}
//键盘事件（不添加）有的浏览器是不支持的像oprea而且容易出现问题
//links[i].onkeypress=links[i].onclick;
}
}
/*addLoadEvent是很厉害的一个函数，为所有的需要用window.onload进行绑定
如果使用window.onload=afunction;在本例中是可以使用，
毕竟只有一个prepareGallery需要在浏览器一加载就执行
可以一旦有多个函数有这个需求
如：
window.onload=firstfunction;
window.onload=secondfunction;
其实只有最后一个才会被实际执行
so 给出一个解决方式：
window.onload=function(){
firstfunction();
secondfunction()
}
在绑定函数不是很多的情况下这是最简单的方案
以下的方案是弹性最佳的方案，无论有多少个函数需要绑定，都可以轻松绑定
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
