技術非常多，樣例非常多。僅僅好慢慢學，慢慢實踐！！如今學的這本書是【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.var ul = eg.$("smallPhotosList"); 3.ul.innerHTML = ''; //每次顯示時要清空舊的內容 4. var start = (group-1)*eg.groupSize; //計算須要的data數據的開始位置 5. var end = group*eg.groupSize //計算須要的data數據的結束位置 6. for(vari=start;(i<end&&i<eg.data.length);i++){ 7. var li = 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

轉載于:https://www.cnblogs.com/yangykaifa/p/7224723.html

總結

以上是生活随笔為你收集整理的JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。