Question

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

或者我应该绑定所有可能的事件？像这样：

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

此外，绑定多个事件会影响性能吗？

Answer 1

change只会在字段失去焦点时触发（对于大多数输入）。如果您想要更实时的内容，请使用HTML 5 oninput事件。这几乎可以捕获输入元素的任何类型的值更改（并且它也会冒泡！）。但是，Internet Explorer 8及更低版本不支持此功能，但I wrote a plugin会为这些浏览器映射到onpropertychange。

另见：

Effectively detecting user input in JavaScript

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

Answer 2

只有聆听change事件可能就足够了（另请参阅@Andy E's answer）。来自documentation：

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

Answer 3

我认为没有性能损失，除非你在处理程序中做一些非常慢的事情。

Answer 4

每个事件都在不同的时间发生。可能会有一些重叠，但取决于你在做什么，它们可能会有很大不同。例如，在keyup上的值已更新后，会发生input事件。而keydown发生之前。这可以使您停止输入文本框中的值。

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

Answer 5

这样做的问题：

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

是你必须找出实际被触发的事件，进入事件处理程序。

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

如果这对你来说足够，我会绑定一个change事件。在对所有这些事件进行处理时遇到了很多麻烦，因为click在change之前触发，focus在click等之后触发等等。这很伤人的数字出去并且行动正常。

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

5 个答案: