Question

我一直在清理我的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();
    };
}

提前致谢！

Answer 1

我不太确定你是如何获得变量的：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(); });
    }
});

Answer 2

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

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

将上述代码段视为伪代码，因为我不知道您是否使用特定的库，以及事件处理的工作原理。添加更多上下文，我们可以进一步细化。

P.S。通过foreach注册处理程序的问题在于，您实际上是在循环（处理程序）中创建函数，这在性能方面成本高，在某些情况下容易出错。

Answer 3

您可以将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;

function updatePreview() {
    alert('update preview');
}

function showPreview() {
    alert('show preview');
}

<form id="form">
    <input type="text" id="lastname" />
</form>

Answer 4

我的问题的答案如下：

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

可以循环播放事件。

你们所有人都感谢您的回复！

以较短的方式使用事件

4 个答案: