title: Keypress in backbone.js?
body: <p>It looks like key-press can only be executed on a focus element? I don't fully buy into that, there has to be a way to execute a key-press event similar to a click event?</p>
  
  <p>I have a view that works with one item at a time. I have a <code>mouseenter</code> - <code>mouseleave</code> function that adds a class to the item the mouse is over. When the item receives that class I want to be able to use a key-press event to run a function on that item.</p>
  
  <p>Obviously this is a slight obstacle but Id like to find out what I need to do. Below is an example view.</p>
  
  <pre><code>var PlayerView = Backbone.View.extend({
      tagName: 'div',
  
      events: {
          'click .points, .assists, span.rebounds, span.steals':'addStat',
          'mouseenter': 'enter',
          'mouseleave': 'leave',
          'keypress': 'keyAction'
      },
  
      enter: function() {
          this.$el.addClass('hover');
      },
  
      leave: function() {
          this.$el.removeClass('hover');
      },
  
      keyAction: function(e) {
          var code = e.keyCode || e.which;
          if(code == 65) { 
              alert('add assist')
          }
      }
  });
  </code></pre>
  
  <p>So there isn't much logic here, but I am thinking I would write something like this</p>
  
  <pre><code>    keyAction: function(e) {
          var code = e.keyCode || e.which;
          if(code == 65) { 
              var addAssist = parseInt(this.model.get('assists')) + 1;        
              this.model.save({assists: addAssist});
          }
      }
  </code></pre>
  
  <p>Basically If I could figure out how to fire that <code>keyAction</code> method I should be good to go. So what are some caveats I am missing in executing some code like this? I am sure there are a few.</p>
  
  <p>I do understand some of what is wrong with this code, it has no way of knowing when we run keypress in that view, I would have to add a conditional or something to find the active class, so when I execute the keypress it knows what model I am talking about, very vague description here but I get there is something wrong I am just not sure how to do this?</p>
  
  <p><strong>My solution</strong></p>
  
  <pre><code>initialize: function() {
      this.listenTo(this.model, "change", this.render);
      _.bindAll(this, 'on_keypress');
      $(document).bind('keydown', this.on_keypress);
  },
  
  enter: function(e) {
      this.$el.addClass('hover');
  },
  
  leave: function(e) {
      this.$el.removeClass('hover');
  },
  
  on_keypress: function(e) {
      // A for assist
      if(e.keyCode == 65) { 
          if(this.$el.hasClass('hover')) {
              var addThis = parseInt(this.model.get('assists')) + 1;        
              this.model.save({assists: addThis});
          }
      }
      // R for rebound
      if(e.keyCode == 82) { 
          if(this.$el.hasClass('hover')) {
              var addThis = parseInt(this.model.get('rebounds')) + 1;        
              this.model.save({rebounds: addThis});
          }
      }
      // S for steal
      if(e.keyCode == 83) { 
          if(this.$el.hasClass('hover')) {
              var addThis = parseInt(this.model.get('steals')) + 1;        
              this.model.save({steals: addThis});
          }
      }
      // 1 for one point
      if(e.keyCode == 49) { 
          if(this.$el.hasClass('hover')) {
              var addMake = parseInt(this.model.get('made_one')) + 1;        
              this.model.save({made_one: addMake});
  
              var addOne = parseInt(this.model.get('points')) + 1; 
              this.model.save({points: addOne});
          }
      }
      // 2 for two points
      if(e.keyCode == 50) { 
          if(this.$el.hasClass('hover')) {
              var addMake = parseInt(this.model.get('made_two')) + 1;        
              this.model.save({made_two: addMake});
  
              var addTwo = parseInt(this.model.get('points')) + 2; 
              this.model.save({points: addTwo});
          }
      }
      // 2 for two points
      if(e.keyCode == 51) { 
          if(this.$el.hasClass('hover')) {
              var addMake = parseInt(this.model.get('made_three')) + 1;        
              this.model.save({made_three: addMake});
  
              var addThree = parseInt(this.model.get('points')) + 3; 
              this.model.save({points: addThree});
          }
      }
  }
  </code></pre>
  
  <p>This is cool for my app because when the user hovers over the item the user can hit a key to add data, instead of clicking.   </p>