- JavaScript实战-JavaScript、jQuery、HTML5、Node.js实例大全（第2版）
- 张泽娜
- 492字
- 2025-02-24 19:10:52
3.4 响应键盘动作
通常我们都有用键盘来查看照片的习惯，下面介绍如何用键盘来一幅一幅地查看照片。
3.4.1 常见键盘按键对应的ASCII码值
键盘上每一个键都定义了一个ASCII码值，请参考表3-1。
表3-1 常见键盘按键对应的ASCII码值
表3-1只是列举了常用的按键，更多按键可上网查询。
3.4.2 响应键盘动作
响应键盘动作的代码见【范例3-6】。
【范例3-6 响应键盘动作】
1. eg.init = function(){
2. eg.showThumb(1); //初始化要显示的小图列表
3. eg.addListener(eg.$("next"), "click", function(){
//单击上一组图标时
4. eg.nextThumb(); //显示下一组小图列表
5. });
6. eg.addListener(eg.$("prve"), "click", function(){
//单击下一组图标时
7. eg.prveThumb(); //显示上一组小图列表
8. });
9. eg.addListener(document, "keyup", function(e){
10. e = e || event;
11. if(e.keyCode == 37){ //按左方向键←时
12. eg.prvePhoto(); //显示上一张大图
13. }
14. if(e.keyCode == 39){ //按右方向键→时
15. eg.nextPhoto(); //显示下一张大图
16. }
17. });
18. };
19. eg.nextPhoto = function(){
20. if(eg.showNumber%eg.groupSize == (eg.groupSize-1)){
21. eg.nextThumb()
22. }else if(eg.showNumber<eg.data.length-1){
23. eg.showNumber++;
24. eg.showBig(); //显示大图
25. }
26. };
27. eg.prvePhoto = function(){
28. if(eg.showNumber == ((eg.groupNumber-1)*eg.groupSize)){
29. eg.prveThumb()
30. }else if(eg.showNumber>0){
31. eg.showNumber--;
32. eg.showBig();
33. }
34. };
键盘事件的主要代码是【范例3-6】中的第9行，它监听了document的onkeyup事件，这时候我们按左箭头键（←）和右箭头键（→）就可以通过上一张、下一张进行照片浏览了。
下面是几个主要的键盘事件。
● onkeydown是在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
● onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮（如箭头键和功能键）无法得到识别。
● onkeyup是在用户放开任何先前按下的键盘键时发生。