技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2


3.3 响应鼠标动作

图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。

3.3.1 响应小照片单击动作

在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBig()方法，只有在单击小图片的时候响应单击事件才行，所以需要用eg.addListener()方法来实现，具体代码见【范例3-4】。

【范例3-4响应小照片单击动作】


1.eg.showThumb=function(group){2.varul=eg.$("smallPhotosList");3.ul.innerHTML='';//每次显示时要清空旧的内容4.varstart=(group-1)*eg.groupSize;//计算需要的data数据的开始位置5.varend=group*eg.groupSize//计算需要的data数据的结束位置6.for(vari=start;(i<end&&i<eg.data.length);i++){7.varli=document.createElement("li");8.li.innerHTML='<imgsrc="'+eg.data[i][1]+'"id="thumb'+i+'"width="80"height="40"/>';9.(function(i){10.eg.addListener(li,"click",function(){//增加click事件监听11.eg.showNumber=i;//记录选中的图标序号供其他函数调用12.eg.showBig();13.});14.})(i);//将i作为值传递进去15.ul.appendChild(li);16.}17.};18.eg.showBig=function(){//根据某个编号显示大图19.eg.$("bigPhotoSrc").src=eg.$("thumb"+eg.showNumber).src.replace("thumb","photo")20.};

【范例3-4】中第9行就是响应小照片单击动作的代码，这里使用了一个闭包，即一个自调用的匿名函数。(function(){})()是最简单的闭包。大括号的内容会顺序执行。如果去掉第9行和第14行代码，那么会发现始终显示当前组照片中的最后1张，在for语句体里一般要用闭包把变量值传到内部的绑定事件里。



最具士兵突击实战类型的JavaScript