Question

我有一个按键处理程序绑定到表单上的所有输入元素，我需要根据接收到按键的元素执行不同的操作。下面的所有3种变化都有效，但我想知道是否有一个（或其他）是首选的，为什么。

$(':input').keypress(function(e) {
  if($(this).attr('id') === 'foo')  // option 1
    console.log('foo'); 
  if($(this)[0] === $('#bar')[0])   // option 2
    console.log('bar');
  if(e.target === $('#baz')[0])     // option 3
    console.log('baz'); 
});

页面上的元素很少，因此性能并不是真正的问题。它更像是一种风格/标准/可读性问题。

Answer 1

选项＃4：

$(':input').keypress(function(e) {
  if(this.id == 'foo') console.log('foo'); 
});

this将是处理程序中的DOM元素，不需要jQuery对象检查，只需对本机.id DOM property进行字符串比较，它清晰，简洁，最快 - 赢，赢这里。

Answer 2

最好的方法就是这些。使用this.id而不是$(this).attr('id')来提高效果：

if (this.id == 'foo') {

如果您实际需要的是具有ID foo的输入元素，那么更好的方法是在选择器中使用ID。

$('#foo').keypress(function(e) {

这将比:input快得多。

在jQuery中测试事件目标的最佳语法

2 个答案: