javascript 美术馆--改进1

来源:互联网 发布:数控车床g84攻牙编程 编辑:程序博客网 时间:2024/06/10 19:06

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;i<links.length;i++)    {        links[i].onclick=function(){   //使用匿名函数            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

0 0
原创粉丝点击