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
- javascript 美术馆--改进1
- javascript 美术馆
- JavaScript美术馆
- javaScript学习笔记 No.2 -- 案例研究-美术馆
- javaScript 学习笔记 No.3 -- 案例研究-美术馆
- [读书笔记]javascript编程艺术——美术馆案例(一)
- “访问美术馆”
- Javascript+Dom编程艺术:美术馆例题(将js与文档内容分离的几种实现)
- 什么是电子美术馆
- 互联网+美术馆=?
- 洛谷 P1270 “访问”美术馆
- 洛谷 P1270 “访问”美术馆
- 洛谷 P1270 “访问”美术馆
- luogu 访问”美术馆“ && 偷天换日
- 【洛谷1270】“访问”美术馆
- JavaScript模板引擎的改进
- javascript 美术库 改进2
- JavaScript 写计算器改进版
- Android studio 导出jar包并混淆和aar
- driver register到bus时候,是如何attach到匹配的device???
- 聚类算法——K-means(下)
- Linux删除文件和文件夹【命令】
- JAVA fail-fast机制
- javascript 美术馆--改进1
- UISegmentedControl的简单使用
- iOS面试题总结---block
- Leetcode 263
- 反转单链表
- xcode报错 library not found for -lAFNetworking
- java内存分配分析/栈内存、堆内存
- 模板编程的文件组合方式
- Java中的堆和栈的区别