获取键码/点击/触发更改事件

Question

是否可以从（jquery）更改事件处理程序中找出触发更改事件的原因 - 按下哪个键或鼠标单击？

我的用例：我有 input[type=text] 项目的动态列表，如果用户填写最后一个空项目，我会为另一个项目添加新的 input[type=text]。如果用户按下选项卡（触发了更改事件），我想自动聚焦它，但不是例如当用户点击某处时（因此也触发了更改，但用户可能想要关注其他内容）。

简化示例：

https://jsfiddle.net/yxu82p1o/1/

<input type=text>
<script>
function addMore() {
  $('input').off('change.addMore');
  $('<input type=text>').insertAfter($('input').last()).on('change.addMore', addMore);
}
$('input').on('change.addMore', addMore);
</script>

PS。我可以找出解决方法，例如附加另一个 keyup 事件并从中找出按下的键，但从更改事件中找出导致它的原因会更简单、更清晰。

Answer 1

这可能是一个选项。侦听input 元素上的keydown 事件，如果TAB 键触发了事件并且该元素是input 元素，则触发change 元素上的change 事件。然后聚焦动态添加的input元素。

function addMore() {
  $('input').off('change.addMore');
  $('<input type=text>').insertAfter($('input').last()).on('change.addMore', addMore);
}
$('input').on('change.addMore', addMore);

$('body').on('keydown', 'input', function(e){
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9 && this.tagName === "INPUT") {
    e.preventDefault();
    $(this).change();
    $(':text').last().focus();
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type=text>