如何在$(document).keyup事件中正确使用jQuery的$(this)

你把keyup事件绑定在了document上，所以事件处理函数里的$(this)指向的是document对象，而document本身没有id属性，自然输出undefined。

有两种常用的处理方式：

方式一：直接绑定到input元素 #

如果只需要监听input的键盘事件，直接把事件绑定到input选择器上，此时$(this)就会指向触发事件的input元素：

$('input').keyup(function(e) {
  console.log($(this).attr('id'));
});

方式二：通过事件对象获取触发元素（必须绑定document时用） #

如果一定要把事件绑定在document上（比如动态生成的input需要事件委托），可以通过事件参数e的target属性拿到实际触发事件的DOM元素，再转成jQuery对象操作：

$(document).keyup(function(e) {
  // 先过滤只处理input元素的事件
  const $target = $(e.target);
  if ($target.is('input')) {
    console.log($target.attr('id'));
  }
});

补充说明 #

• e.target是原生DOM节点，用$(e.target)包装后就能使用jQuery的attr()等方法
• 如果需要区分事件委托中的绑定元素和触发元素，e.currentTarget会指向绑定事件的元素（这里就是document），而e.target始终是实际触发事件的那个元素

内容的提问来源于stack exchange，提问作者Cymro