jQuery-在输入字段上绑定多个事件

Question

我想知道在表单字段上绑定单个change()事件是否足以在字段值更改时正确执行操作。

还是应该绑定所有可能的事件？ 像这样：

    $(this).bind('change keyup focus click keydown', function(){
       // ...
    }).change();

另外，绑定多个事件是否会影响性能？

Answer 1

仅当字段失去焦点时（对于大多数输入）， change才会触发。 如果您想获得更多实时信息，请使用HTML 5 oninput事件。 这几乎可以捕获输入元素的任何类型的值更改（它也会冒泡！）。 不过，Internet Explorer 8及更低版本不支持此功能，但我编写了一个插件 ， 该插件映射到这些浏览器的onpropertychange 。

也可以看看：

• 有效检测JavaScript中的用户输入

对于性能方面，您描述的每个事件在不同的时间触发，因此除非性能如此，否则不成问题。

Answer 2

仅听change事件可能就足够了（另请参阅@Andy E的答案 ）。 从文档中 ：

change事件在其值更改时发送到元素。 此事件仅限于<input>元素， <textarea>框和<select>元素。 对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但是对于其他元素类型，该事件将推迟到该元素失去焦点之前。

Answer 3

我认为没有性能损失，除非您在处理程序中做得很慢。

Answer 4

每个事件在不同的时间发生。 可能会有一些重叠，但是根据您的操作，它们可能会非常不同。 例如，在input上已更新值之后，将发生keyup事件。 而keydown之前发生过。 这可以使您停止输入文本框的值。

就性能而言，在此示例中，您正在为五个不同事件运行代码。 与单个事件相比。 至少您的代码应区分事件之间的重叠。

Answer 5

这样做的问题：

$(this).bind('change keyup focus click keydown', function(e) { // ...

是您必须找出实际触发了哪个事件，然后进入事件处理程序。

switch(e.type) {
    case 'change': {
        break;
    }
    case 'focus': {
        break;
    }
    // ...
}

如果您足够，我将绑定一个change事件。 在所有这些事件上进行操作时，您会遇到很多麻烦，因为click会在change之前触发，在click之后会change focus等等。这很难弄清楚并采取正确的措施。