js&html.按键触发事件

Darth_EF

非常简单的一个东西,但是太菜了所以写得比较臃肿。

1. 
   
2. /**对比两个列表项是否相同(无序)*/
   
3. function arrayCmp(CArray,keysArray){
   
4.     if(CArray&&keysArray){
   
5.         if(CArray.length!=keysArray.length)
   
6.             return false;
   
7.         var ALength=CArray.length;
   
8.         var flags=Array(ALength)
   
9.         for(var i=ALength-1;i>=0;--i){
   
10.             for(var j=ALength-1;j>=0;--j){
    
11.                 if(CArray[i]==keysArray[j]){
    
12.                     flags[i]=true;
    
13.                 }
    
14.             }
    
15.         }
    
16.         for(var i=ALength-1;i>=0;--i){
    
17.             if(!flags[i])return false;
    
18.         }
    
19.         return true;
    
20.     }
    
21. }
    
22. 
    
23. /**按键记录器key notbook*/
    
24. function keyNB(){
    
25.     this.FElement;
    
26.     this.downingKeyCodes=[];
    
27.     this.keysdownF  =[];    //function
    
28.     this.keysdownFF =[];    //function flag
    
29.     this.keysupF={};
    
30. }
    
31. 
    
32. keyNB.prototype={
    
33.     // 添加按键事件
    
34.     setDKeyFunc:function(keycode,func){
    
35.         if(!keycode||!func){
    
36.             return -1;
    
37.         }
    
38.         if(keycode.constructor==Number){
    
39.             this.keysdownFF.push([keycode]);
    
40.         }
    
41.         else if(keycode.constructor==Array){
    
42.             this.keysdownFF.push(keycode);
    
43.         }
    
44.         this.keysdownF.push(func);
    
45.     },
    
46.    
    
47.     // 移除按键事件
    
48.     removeDKeyFunc:function(_keycode,func){
    
49.         var keycode;
    
50.         if(!_keycode||!func){
    
51.             return -1;
    
52.         }
    
53.         if(_keycode.constructor==Number){
    
54.             keycode=[_keycode];
    
55.         }
    
56.         else if(_keycode.constructor==Array){
    
57.             keycode=_keycode;
    
58.         }
    
59.         for(var i=this.keysdownFF.length-1;i>=0;--i){
    
60.             if(arrayCmp(this.keysdownFF[i],keycode)){
    
61.                 if(this.keysdownF[i]==func){
    
62.                     this.keysdownF.splice(i,1);
    
63.                     this.keysdownFF.splice(i,1);
    
64.                     break;
    
65.                 }
    
66.             }
    
67.         }
    
68.     },
    
69. 
    
70.     /**按下新按键*/
    
71.     setKey:function(e){
    
72.         var flag=false;
    
73.         var i=0;
    
74.         var downingKALength=this.downingKeyCodes.length;
    
75.         if(downingKALength)
    
76.         for(var j=downingKALength-1;j>=0;--j){
    
77.             if(flag)break;
    
78.             flag=e.keyCode==this.downingKeyCodes[j];
    
79.             i++;
    
80.         }
    
81.         if(!flag){
    
82.             // 有新的按键按下
    
83.             this.downingKeyCodes[i]=e.keyCode;
    
84.             for(i=this.keysdownFF.length-1;i>=0;--i){
    
85.                 if(arrayCmp(this.keysdownFF[i],this.downingKeyCodes)){
    
86.                     this.keysdownF[i].call(this.FElement,e);
    
87.                 }
    
88.             }
    
89.         }
    
90.         else{
    
91.             for(i=this.keysdownFF.length-1;i>=0;--i){
    
92.                 if(arrayCmp(this.keysdownFF[i],this.downingKeyCodes)&&!this.keysdownF.keepFlag){
    
93.                     this.keysdownF[i].call(this.FElement,e);
    
94.                 }
    
95.             }
    
96.         }
    
97.     },
    
98. 
    
99.     /**抬起按键*/
    
100.     removeKey:function(e){
     
101.         var flag=false;
     
102.         var downingKALength=this.downingKeyCodes.length;
     
103.         if(downingKALength)
     
104.         for(var i=downingKALength-1;i>=0;--i){
     
105.             if(e.keyCode==this.downingKeyCodes[i]){
     
106.                 this.downingKeyCodes.splice(i,1);
     
107.                 if(this.keysupF[e.keyCode.toString()])this.keysupF[e.keyCode.toString()].call(this.FElement,e);
     
108.                 return 0;
     
109.             }
     
110.         }
     
111.     },
     
112.     reNB:function(){
     
113.         this.downingKeyCodes=[];
     
114.     }
     
115. }
     
116. 
     
117. /**
     
118. * 添加按键事件
     
119. * @param {Document} _Element
     
120. * @param {Boolean} _keepFlag 是否重复触发事件
     
121. * @param {Number||Array} _keycode 用数组表示组合键
     
122. * @param {Function} _event
     
123. * @param {Boolean} _type flase=>down;true=>up
     
124. */
     
125. function addKeyEvent(_Element,_keepFlag,_keycode,_event,_type){
     
126.     var thisKeyNotbook;
     
127.     if(!_Element.keyNotbook){
     
128.         _Element.keyNotbook=new keyNB();
     
129.         thisKeyNotbook=_Element.keyNotbook;
     
130.         thisKeyNotbook.FElement=_Element;
     
131.         _Element.addEventListener("keydown" ,function(e){thisKeyNotbook.setKey(e)});
     
132.         _Element.addEventListener("keyup"   ,function(e){thisKeyNotbook.removeKey(e)});
     
133.         _Element.addEventListener("blur"    ,function(e){thisKeyNotbook.reNB()});
     
134.     }
     
135.     else{
     
136.         thisKeyNotbook=_Element.keyNotbook;
     
137.     }
     
138.     if(_type){
     
139.         thisKeyNotbook.keysupF[_keycode.toString()]=_event;
     
140.     }
     
141.     else{
     
142.         thisKeyNotbook.setDKeyFunc(_keycode,_event);
     
143.         thisKeyNotbook.keysdownF[thisKeyNotbook.keysdownF.length-1].keepFlag=_keepFlag;
     
144.     }
     
145. }
     
146. 
     
147. /**
     
148. * 移除按键事件
     
149. * @param {Document} _Element
     
150. * @param {Number||Array} _keycode
     
151. * @param {Function} _event
     
152. * @param {} _type flase=>down;true=>up
     
153. */
     
154. function removeKeyEvent(_Element,_keycode,_event,_type){
     
155.     if(_Element.keyNotbook){
     
156.         var thisKeyNotbook=_Element.keyNotbook;
     
157.         if(_type){
     
158.             delete thisKeyNotbook.keysupF[_keycode.toString()];
     
159.         }
     
160.         else{
     
161.             thisKeyNotbook.removeDKeyFunc(_keycode,_event);
     
162.         }
     
163.     }
     
164. }

复制代码