jQuery：我需要同时使用keyUp和change事件吗？

Question

我有一个页面有2个表单，每个表单都有一个输入文本字段；

第一个表单中的输入文本值必须与第二个表单中的输入文本值相同；

当值发生变化时，另一个输入文本字段也会修改其值；

我应该同时使用onkeyup和onchange事件吗？

如果不行，哪个是正确的？

我问这个是因为它看起来像我有2个提交请求，我想这就是原因。

   $('input.searchbox').keyup( function(){
       $('input.txtfieldsearch').val($('input.searchbox').val());
       listViewUpdate();
       $('input.txtfieldsearch').trigger("keyup");
   });
                
    $('input.txtfieldsearch').keyup( function(){
       $('input.searchbox').val($('input.txtfieldsearch').val());
       listViewUpdate();
    });
                
   $('input.searchbox').change( function(){
       $('input.txtfieldsearch').val($('input.searchbox').val());
       listViewUpdate();
       $('input.txtfieldsearch').trigger("change");
   });
                
    $('input.txtfieldsearch').change( function(){
       $('input.searchbox').val($('input.txtfieldsearch').val());
       listViewUpdate();
    });

- Ionut Flavius Pogacian

---

但哪个才是正确的使用方式？ - Ionut Flavius Pogacian

你希望数值何时更新？change和keyup是不同的事件，你可能会同时使用它们。 - Bergi

你有没有注意到你从“searchbox”中两次调用了“listViewUpdate”函数？ - Bergi

是的，我做了；第一个是针对keyup事件；第二个是针对change事件。 - Ionut Flavius Pogacian

不，我的意思是每个事件触发两次。您也会在txtfieldsearch上触发处理程序，这将再次执行listViewUpdate。 - Bergi

是的，真的，这可能是问题之一，可能的答案。 - Ionut Flavius Pogacian

Answer 1

你可以使用$.on()函数并附加多个事件处理程序。

$("#element").on('keyup change', function (){
   // Your stuff...
});

- rigobcastro

---

这会调用事件回调函数两次。 - Robin

我从未找到一个不会调用事件回调两次的解决方案。最终，我采用了一种hack方法，使用CSS删除了我的输入框中的增量箭头，这迫使我在这种情况下使用keyup：`/* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }/* Firefox */ input[type=number] { -moz-appearance: textfield; } ` - kevin walker

Answer 2

你可以仅使用"input"事件，如果您不需要为旧浏览器提供支持。每当输入元素中的值改变时，它将被触发。以下是受支持浏览器的列表：https://developer.mozilla.org/en-US/docs/Web/Events/input

- Swarup Sengupta

Answer 3

onkeyup 事件通常在用户按下并释放一个键时触发。onchange 事件可能会在用户使用浏览器的自动完成功能时发生。你应该使用.on()方法来捕获这两个事件，以防万一：

$('input.searchbox').on('keyup change', function(e){
    $('input.txtfieldsearch').val($('input.searchbox').val());
    listViewUpdate();
    $('input.txtfieldsearch').trigger(e.type);
});

$('input.txtfieldsearch').on('keyup change', function(){
    $('input.searchbox').val($('input.txtfieldsearch').val());
    listViewUpdate();
});

- SeinopSys

Answer 4

如果你想要对变化做出反应，你应该使用change。

有些情况下，按键事件（如shift）不会造成变化，而有些情况下，没有按键事件却会发生变化（如粘贴）。

- ColBeseder

---

如果我使用了 keyup 和 change，这是否意味着我正在正确地进行操作？ - Ionut Flavius Pogacian

Keyup 很少会有变化。只有在模糊输入字段时，change 才会触发。 - Bergi

它们执行不同的操作。你应该分别尝试它们，看看它们何时触发，并确定你需要哪一个。在某些情况下，两者都可能是正确的。 - ColBeseder