Javascript 以较短的方式使用事件

我一直在清理我的js代码，我想知道是否有可能以一种通用的方式使用事件

我有一个表单，它以oninput事件响应

现在，对于每个输入字段，我都有一个事件应该做什么的特定指令

以下是我的javascript代码：

    firstname.oninput = function () {
    updatePreview();
    updatePostHeader();
    showPreview();
};
lastname.oninput = function () {
    updatePreview();
    showPreview();
};
age.oninput = function () {
    updatePreview();
    showPreview();
};
job.oninput = function () {
    updatePreview();
    showPreview();
};
avatar.oninput = function () {
    updateAvatar();
    showPreview();
};
message.oninput = function () {
    updatePreview();
    showPreview();
};

正如你所看到的，这是大量的冗余

我可以像下面那样简化吗

    for(var i=0; i<inputFields.length; i++) {
    inputFields[i].oninput = function() {
        updatePreview();
        showPreview();
    };
}

---

for（var i=0；i我不太确定如何获取变量，如：
lastname
，
age
等。但最干净的方法是将它们放入您建议的数组中。例如：

var controlIds = [
    {"id": 'id1', "functions": [updatePreview, showPreview]},
    {"id": 'id2', "functions": [updatePreview, updatePostHeader, showPreview]}
];
controlIds.map(function (item){
    item["element"] = document.getElementById(item["id"]);
    return item;
}).forEach(function(elem) {
    elem["element"].oninput = function () {
        elem["functions"].forEach(function(fn) { fn(); });
    }
});

如果字段属于同一表单/父级，则可以将oninput事件注册到父级并将其委托给其所有子级

parent.on('event', childType, handler);

将上述代码片段视为伪代码，因为我不知道您是否在使用特定的库，也不知道事件处理是如何工作的

另外，通过foreach注册处理程序的问题是，实际上您是在一个循环（处理程序）中创建函数，在某些情况下，这在性能和易出错方面代价高昂。
您可以移动
showPreview（）
函数转换为公共父事件处理程序，因为
oninput
事件将冒泡到父元素。然后代码将简化为：

firstname.oninput = function () {
    updatePreview();
    updatePostHeader();
};
lastname.oninput = updatePreview;
age.oninput = updatePreview
job.oninput = updatePreview;
avatar.oninput = updateAvatar;
message.oninput = updatePreview;

form.oninput = showPreview;

检查下面的简化演示


lastname.oninput=updatePreview；
form.oninput=showPreview；
函数updatePreview（）{
警报（“更新预览”）；
}
函数showPreview（）{
警报（“显示预览”）；
}
我的问题有以下答案：

form.oninput = function () {
    for (var i = 0; i < inputFields.length; i++) {
        inputFields[i].oninput = function () {
            updatePreview();
            showPreview();
        };
    }
};

form.oninput=函数（）{
对于（变量i=0；i

可以使用事件循环

谢谢大家的回复！
是的，你可以，只需要创建一个输入数组。是的，我做了，但是现在如何调用？我通过输入值和使用document.getelementbyidb获取变量，但是所有的
oninput
处理程序都不相同，所以这无法处理。我认为这是问题的关键部分。它们是similar，但不完全相同。@jfriend00实现这一点应该并不困难。让数组的每个元素都是元组：
[control，shouldUpdatePostHeader被调用]
。使用布尔值第二个元素调用
updatePostHeader（…）
函数。@我同意，但我认为这是OP要求的，而你没有回答。@jfriend00:更新了一个更通用的实现。希望这是OP要求的。但是所有的
oninput
处理程序都不相同，所以这无法处理。我认为这是问题的关键部分e、 它们是相似的，但不完全相同。现在，我在问题中编辑了：）我也没有得到你的抽象答案，你能给我一个更好的解释吗？？提前谢谢！描述问题的最佳方式是显示所有代码。但我会给你一个更好的解释：我一直在建立一个论坛，为此我使用一个表单来发布帖子。每次用户要添加帖子时，都会显示预览。因此，我在每个inputfield上创建了一个事件来显示预览，对于每个字段，它都会更新这些预览