Using jQuery to listen to keydown event

Question

I want to detect when the enter key is pressed, on HTML that will be injected dynamically.

To simply detect when the enter key is pressed, I can do:

$('#textfield').keydown(function (e){
    if(e.keyCode == 13){
        console.log('Enter was pressed');
    }
})

This code works for on(), but I am worried it is inefficient since jQuery will check every time a key is pressed. Is there anything inefficient about this?

$('body').on('keydown','#textfield', function(event) {
  if (event.keyCode == 13) {
    console.log('Enter was pressed');
  }
}

Solution 1

If you want to capture the keypress anywhere on the page -

$(document).keypress(function(e) {
  if(e.which == 13) {
    // enter pressed
  }
});

Don't worry about the fact this checks for every keypress, it really isn't putting any significant load on the browser.

Solution 2

You could still use .on()

$(document).off('keyup#textfield');

$(document).on('keyup#textfield', function(event) {
    if (event.keyCode == 13) {
         console.log('Enter was pressed');
    }
});

Solution 3

In practical terms, nothing you have to worry about. The browser is already going to be bubbling that event, and even though it may be trapped by the body and run a selector from the delegated event, this is not a deep or difficult practical check for JQuery to perform, especially with an ID-only selector.

Comments

[Fabian Lauer]

Agree. BTW: You don't really have a choice - theres no way to add a listener to key (although it would be nice).

[JJJ]

...and even if there were a way to add a listener to a single key, internally the browser would still have to react to every keypress to determine which key was pressed.

[M H]

buy why is someone typing into a hidden field? @DCdaz

[Admin]

A field that has been hidden or injected and shown again after Dom.