input元素onChange事件失效，select元素正常触发的原因排查

问题：我有一个包含两个input和一个select的表单，为表单绑定change事件后，select元素能正常触发该事件，但input元素却无法触发，这是为什么？

原代码示例 #

JavaScript代码

$('#form_table_filter').change(function () {
  var formDataTablo = $('#form_table_filter').serialize();
  console.log(formDataTablo);
});

HTML代码

<form id="form_table_filter">
    <input type="text"  name="date_start"> -
    <input type="text"  name="date_end">
    <select id="selection_type" name="selection_type">
      <option value="3" selected>Все типы</option>
      <option value="2">Автомат</option>
      <option value="1">Ручной</option>
    </select>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

原因分析 #

核心是不同表单元素的change事件触发规则存在差异：

• select元素：只要切换选项，就会立刻触发change事件；
• input type="text"元素：只有当输入框失去焦点（比如点击页面其他区域），并且内容确实发生变化时，才会触发change事件。你大概率是在输入过程中没让输入框失焦，所以误以为事件没触发。

解决方案 #

如果想要input在输入过程中实时触发事件，可以改用input事件，或者同时监听change和input事件，兼顾两种场景：

// 同时监听change和input事件
$('#form_table_filter').on('change input', function () {
  var formDataTablo = $('#form_table_filter').serialize();
  console.log(formDataTablo);
});

如果只需要在输入完成（失焦且内容改变）时触发，原代码本身是有效的，输入后点击页面其他区域就能看到事件触发。

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