了解用户何时更改表单上的内容的 Javascript 事件

Question

我有一个表格，其中有:

• 两个输入文本字段
• 4个选择
• 1 个文本区域

是否有一种简单的方法来捕获以下事件？

当用户在输入字段中键入内容，或从列表中选择内容，或在文本区域内键入内容时？

或者我是否必须按照老式的方式来做，比如:为选择做一个改变功能，为输入做一个焦点等等？

基本上，我希望能够知道表单上的内容何时发生变化。

有什么想法吗？

这是一个更新:

假设我使用以下代码:

$('input, textarea, select').on('change', function() {
    console.log('hey');

    // how do I unbind this certain even after the first "hey" listing of the console?

});

即使在控制台首次上市后，如何解除绑定(bind)？

Answer 1

找到 input 时元素更改，我们可以简单地执行以下操作:

$('input').change(function(){
    console.log('Something has changed');
});

这将捕获所有 input 上的所有事件页面上的元素，但在您的情况下，我们有以下元素:

• 两个输入文本字段
• 4个选择
• 1 个文本区域

input选择器不会匹配所有这些。但是，不要 panic !我们仍然可以这样做。巧妙之处在于，在 DOM 中，所有祖先元素都会收到发生在其祖先上的事件的通知。例如，点击 span在 div 里面将通知两个元素已发生点击。

所以在这种情况下，我们只需要找到一个包含所有这些元素的公共(public)祖先元素，并捕获其上的事件。最明显的使用方式是 form :

$('form').change(function(){
    console.log('Something has changed');
});

但是这可能不是我们能做的最好的。例如，最好有一种快速的方法来访问已更改的元素。如果我们能够确保没有其他元素可以触发该功能，那也很好。 jQuery 通过 on 使我们成为可能功能。这允许我们将处理程序附加到 form元素并确保原始元素与选择器匹配，然后为我们提供对该元素的引用 this从函数内部。

此代码可能如下所示:

$('form').on('change', 'input, select, textarea', function() {
    console.log('Something has changed in an element called ' + this.name;
});

---

您的编辑表明您希望能够在某个时候禁用处理程序。

有两种方法可以做到这一点。第一种简单粗暴:

$('form').off('change');

没有了change事件将在 form 上捕获.但是，如果您想重新启用它，则必须完成重新绑定(bind)事件处理程序的整个繁琐过程。另一种选择是使用一个变量来告诉您是否应该启用事件处理程序:

var enabled = true;
$('form').on('change', 'input, select, textarea', function() {
    if (enabled) {
        console.log('Something has changed in an element called ' + this.name;
    }
});

然后您可以通过设置 enabled 来禁用处理程序至 false , 并通过将其设置为 true 来重新启用它再次。