javascript 美术馆--改进1

最新推荐文章于 2019-07-04 12:30:21 发布

刘小妞

最新推荐文章于 2019-07-04 12:30:21 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 图片

本文链接：https://blog.youkuaiyun.com/liuwengai/article/details/50802479

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现网页中图片点击显示功能的代码分离，并优化了图片显示流程，确保了良好的用户体验。文章还讨论了如何在同一个事件处理函数中绑定多条指令，以及如何避免在图片显示时出现的潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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