javascript - Onchange 处理大量输入 JS vanilla

Question

我的网站上有多个输入。使用 createElement 创建的输入。我可以给出每个输入类、id 等。

我的目标:每次用户插入新的输入(产品数量)时，它都会计算总价格，无需任何点击，只是自动计算(对象价格 * 输入中的数量)。

我会发布代码，但我认为图像会更好地解释它:

如何使用 getElementByTagName 执行 onchagne。例子是格栅。谢谢!

Answer 1

您可以使用事件委托(delegate)。 input 元素上的几个事件(例如“change”)将向上冒泡到容器元素，直到 DOM 的根。因此，确定哪个是共同祖先元素，并在那里监听您感兴趣的事件。我将选择“输入”事件，因为它会触发用户通过任何输入方式所做的任何更改:

document.addEventListener("input", function() {
    // make calculation here:
});

这样您只需要附加一个监听器。