javascript - 如何在更改或键入时触发选择标签上的某些代码，而不是在选择失去焦点时触发

Question

(使用 jQuery 1.4.4 版本)

问题的标题可能不是很清楚，这就是为什么我在下面进行更详细的描述:

当我的一个选择框中的选择发生变化时，我试图触发一些 JavaScript 代码。我知道我可以使用 change() 来做到这一点，如下所示:

var my_handler = function(eventObject){
  // ... do something here ...
};
$('#my_select_box').change(my_handler);

问题是当用户通过键盘更改选择时不会触发此操作。我在 Stack Overflow 中搜索，每个人都建议在 keyup 事件上也绑定(bind)相同的处理程序，如下所示:

var my_handler = function(eventObject){
  // ... do something here ...
};
$('#my_select_box').change(my_handler).keyup(my_handler);

确实，当我通过键盘更改选择和通过鼠标更改选择时，处理程序都会被执行。

问题是当我用键盘更改选择然后我移动到表单中的下一个字段(通过鼠标或键盘)时。再次触发处理程序(第二次)

你能解释一下为什么会发生这种情况，并告诉我是否有办法绕过这个问题？

Answer 1

似乎唯一可行的答案是以某种方式跟踪您的值的实际变化，例如事件处理程序之外的变量。您可能无法避免提出该事件，但您可以选择不响应它。下面的例子说明了:

var lastVal = null;
var my_handler = function(eventObject) {
    if (lastVal == $(this).val()) return;
    console.log("Changed");
    lastVal = $(this).val();
    eventObject.stopPropagation();
};

$('#my_select_box').change(my_handler).keyup(my_handler);