javascript 美术馆--改进1

1． 实现点击会在本页显示图片的代码分离

window.onload=prepareGallery;//每个事件处理函数只能绑定一条指令
function prepareGallery()
{
    if(!document.getElementsByTagName) return false;//判断是否支持javascript,否则不执行
    if(!document.getElementById) return false;
    if(!document.getElementById("imagegallery"))  return false;
    var gallery=document.getElementById("imagegallery");//找到ul
    var ilnks=gallery.getElementsByTagName("a");//找到ul标签中所有的a
    for (var i=0;ifunction(){   //使用匿名函数
            showPic(this);
            return false;
            }
        }

    }

由于每个事件处理函数只能绑定一条指令，所以创建一个匿名函数来绑定多条指令

window.onload=function(){
    firstFunction();
    secondFunction();   
    }

另一种解决绑定多条指令的方法（通用方法）

function addLoadEvent(func){
    var oldonload=window.onload;//把现有的事件处理函数的值存入变量oldonload
    if(typeof window.onload!='function'){
        window.onload=func;//如果处理函数还没绑定任何函数，就把新函数添加给它
        }
        else{
            window.onload=function(){
                oldonload();//如果已经绑定了函数，就把新函数追加到指令的末尾
                func();
                }
            }
    }

addLoadEvent(firstFunction);//调用，追加函数
addLoadEvent(secondFunction);

2.showPic 执行时缺少必要的检查，比如检查id为placeholder的元素是否存在，改进如下：

function showPic(whichpic){
    if(!document.getElementById("placeholder"))  return false;
     var sourse=whichpic.getAttribute("href");
     var placeholder=document.getElementById("placeholder");
     placeholder.setAttribute("src",source);
     if(!document.getElementById("description"))  return false;
     var text=whichpic.getAttribute("title");
     var description=document.getElementById("description");
     description.firstChild.nodeValue=text;

    }

If(placeholder.nodeName!=”IMG”) return true;//检查是否是一张图片
注意：nodeName属性总是返回一个大写字母，即使元素在html中是小写
3. 假设鼠标点击和键盘按下都可以触发图片显示的功能

link[i].onclick=function(){ 
    return showPic(this);   
    }
links[i].onkeypress=function(){
    return showPic(this);
    }

//另一种简单的方法
links[i].onkeypress=links[i].onclick;

Onkeypress：每按下一个按键都会触发它，包括TAB键，这样会使用户无法离开当前的链接。Onclick对键盘浏览的功能支持的很好，不必增加onkeypress