web-dev-qa-db-ja.com

jQueryを使用してキーダウンイベントをリッスンする

動的に挿入されるHTMLで、Enterキーが押されたことを検出したい。

Enterキーが押されたことを検出するには、次のようにします。

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

このコードはon()で機能しますが、キーが押されるたびにjQueryがチェックするため、効率が悪いのではないかと心配しています。これに関して非効率なものはありますか？

_$('body').on('keydown','#textfield', function(event) {
  if (event.keyCode == 13) {
    console.log('Enter was pressed');
  }
}
_
javascriptjqueryevent-handlingonkeydownjquery-events
39
Don P

ページの任意の場所でキー入力をキャプチャする場合-

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

これがすべてのキー入力をチェックするという事実を心配しないでください、それは実際にブラウザに大きな負荷をかけていません。

56
Aidan Ewen

それでも.on（）を使用できます

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

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

実際には、心配する必要はありません。ブラウザーは既にそのイベントをバブリングする予定であり、bodyにトラップされ、委任されたイベントからセレクターを実行しても、JQueryが実行するための深いまたは難しい実用的なチェックではありません。 IDのみのセレクター。

1
Plynx