這篇文章主要為大家展示了“javascript組合按鍵事件監(jiān)聽的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“javascript組合按鍵事件監(jiān)聽的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)建站長期為成百上千家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為定日企業(yè)提供專業(yè)的網站建設、網站設計，定日網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

JS組合按鍵事件監(jiān)聽，支持同時監(jiān)聽多組按鍵如{a,b,c,}{ctrl,c}。

實例代碼：

 
   (function(){ 
    /** 
    *dqKeys v1.0.0 | (c) 2016 www.findme.wang 
    *@params json keys 監(jiān)聽的按鍵 
    *@params bool isOrder 按鍵是否有相應的順序 
    *@params Function sucFuc 完成按鍵的回調函數(shù) 
    *@params Function cancelFuc 完成按鍵取消后的回調函數(shù) 
    *@author lidequan 
    */ 
    var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) { 
      // 函數(shù)體 
      return new dqKeys.fn.init(keys,isOrder,sucFuc,cancelFuc); 
    } 
    dqKeys.fn = dqKeys.prototype = { 
      'version':'1.0.0',  //版本號 
      'author':'lidequan', //作者 
      'rightKeys':{},   //監(jiān)聽的按鍵{key:code},code為按鍵對應的ascii碼  
      'curKeys':[],    //當前按下的鍵 
      'sucFuc':null,    //完成按鍵的回調函數(shù) 
      'cancelFuc':null,  //完成按鍵取消后的回調函數(shù) 
      'isFinsh':false,  //判斷是否完成按鍵 
      'isOrder':false,  //按鍵是否有相應的順序 
      init:function(keys,isOrder,sucFuc,cancelFuc){ 
        this.rightKeys=keys; 
        this.sucFuc=sucFuc; 
        this.cancelFuc=cancelFuc; 
        this.isOrder=isOrder; 
          
        return this; 
      }, 
      listenkeys:function(){//監(jiān)聽用戶鍵盤操作         
        var _self=this; 
        _self.addListener('keydown', function(oEvent){ 
          var oEvent =oEvent || window.event; 
          if(!_self.arrayContain(_self.curKeys,oEvent.keyCode)){ 
            if(_self.isOrder && _self.getNextKey() == oEvent.keyCode){ 
              _self.curKeys.push(oEvent.keyCode); 
            }else if(!_self.isOrder){ 
              _self.curKeys.push(oEvent.keyCode); 
            } 
          } 
          if(_self.checkResult(_self.rightKeys,_self.curKeys)){ 
            if(_self.sucFuc && !_self.isFinsh){ 
              _self.sucFuc(); 
            } 
            _self.isFinsh=true; 
          } 
        }); 
        _self.addListener('keyup', function(oEvent){ 
          var oEvent =oEvent || window.event;          
          if(_self.checkResult(_self.rightKeys,_self.curKeys) && _self.isFinsh){    
            //完成按鍵,又取消的事件 
            if(_self.cancelFuc){ 
              _self.cancelFuc(); 
            } 
          } 
  
          _self.curKey=_self.remove(_self.curKeys,oEvent.keyCode); 
          _self.isFinsh=false; 
        }); 
      }, 
      arrayContain:function(arr,val){//判斷數(shù)組中是否包含某個元素 
          return (arr.indexOf(val) == -1) ? false:true; 
      }, 
      checkResult:function(json,arr){ //判斷用戶是否按下監(jiān)聽的所有按鍵 
        for(var i in json){ 
           if(arr.indexOf(json[i])==-1){ 
             return false; 
           } 
         } 
        return true; 
      }, 
      remove:function(arr,val) { //從數(shù)組中移除某個元素       
        var index = arr.indexOf(val);  
        if (index > -1) {  
          arr.splice(index, 1);  
        }  
        return arr; 
      }, 
      getNextKey:function(){ //獲取下一次按鍵對應的ascii碼 
        for(var i in this.rightKeys){ 
          if(this.curKeys.indexOf(this.rightKeys[i])==-1){ 
             return this.rightKeys[i]; 
           } 
        } 
        return null; 
      }, 
      addListener:function(ev,fn,bool){ //事件綁定 
        if (document.attachEvent) {  
          document.attachEvent('on' + ev, fn);  
        }else{   
          document.addEventListener(ev,fn,bool);  
        }  
      } 
  
    } 
    dqKeys.fn.init.prototype = dqKeys.fn; 
    window.dqKeys = window.$$= dqKeys; 
   })(); 
  
  //1.測試 
  dqKeys({'a':65,'b':66},true,function(){ 
                  console.log('okey'); 
                },function(){ 
                  console.log('cancel'); 
                }).listenkeys(); 
  
  //2.測試 
  var dqKeys=new $$({'c':67,'d':68},false,function(){ 
                  console.log('keys down '); 
                },function(){ 
                  console.log('keys cancel'); 
                }); 
  dqKeys.listenkeys(); 
  

以上是“javascript組合按鍵事件監(jiān)聽的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！