Javascript 使用具有getElementsByClassName的DOM事件处理程序

我有一个网站，我的工作，从用户的输入和计算结果。所有表单都是html文本输入表单，它们以一定数量输入

我想使用input事件来检查用户何时在这6种文本形式中输入新值。我正在使用的书中的示例建议将getElementById方法与dom事件处理程序一起使用，以实现以下目的：

例如：

function doWhatIwantToDo()
{
    //Do something
}

var el = document.getElementById('username');
el.oninput = doWhatIwantToDo;

这很好，我可以为每个文本表单设置6个唯一的ID，我无论如何都需要这样做，以便在我的javascript代码中更改它们的内部html，但是有没有什么方法可以通过使用类名来检查输入

我尝试使用getElementsByClassName，但它让我大吃一惊，因为它返回一个对象数组

我现在想避免使用jquery解决方案，因为我现在只想学习普通javascript

编辑/结果：

我喜欢“acbabis”和“mohamedrias”的答案，但这本书暗示使用事件侦听器是一种更新的方法，并非所有浏览器都支持。所以现在，我想继续使用它所讨论的传统Dom事件处理程序

“dandavis”的答案是在循环中执行它，这让我意识到，在循环中，将元素绑定到事件处理程序实际上应该是可行的，也许我在循环中犯了一个错误

我检查了一下，愚蠢的是，我没有使用数组符号来循环返回数组中的每个对象，这就是为什么什么都没有发生。以下是我的最终代码：

var test = document.getElementsByClassName("test");

for (var i=0; i < test.length; i++)
{
    console.log( test[i] );
    test[i].onclick = testiness;
}

function testiness ()
{
    alert("Success!");
}

var test=document.getElementsByClassName（“test”）；
对于（变量i=0；i

我将

记录。查询选择所有
以获取此信息

var inputs = document.querySelectorAll('input');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('input', doWhatIWantToDo);
}

var inputs=document.querySelectorAll（'input'）；
对于（变量i=0；i

这将找到页面上的所有输入元素，并将处理程序添加到每个元素中。如果您想使用一个类，只需将其添加到所需的输入标记中，并将
document.queryselectoral（'input'）
替换为
document.queryselectoral（'input.classname'）
var-inputElements=document.queryselectoral（'classname'）；
for（变量i=0，len=inputElements.length；i

querySelectorAll
返回一个静态节点列表。您需要迭代并附加事件

与其使用返回活动HTMLCollection的
getElementsByClassName
，不如使用
querySelectorAll
。
只需执行getElementsByClassName（）结果循环中的最后一行，或者通过检查事件处理程序中的e.target并绑定到公共位置来使用委派，你能补充一下吗？你的评论引起了我的思考，我意识到为什么我试图循环浏览结果却没有成功。这样我就可以选择你的答案作为答案。那就接受mohamedrias的答案吧，和我的评论一样；）在单线程环境中，当循环正好在集合收集调用之后时，live vs static会有什么影响？如果OP动态添加输入元素，那么循环可以永远运行。我只是谨慎使用，所以我更喜欢使用静态NoDistist.HMM，我想是的，没有考虑。（并不是说OP在添加元素）我使用[].forEach而不是循环，所以我想我从来没有遇到过这个问题，即使是在添加输入时。当我使用循环时，我也会缓存dom集合的长度，因为它要快得多，这也会防止“无限循环”…是的，如果我们缓存元素的长度，那么它会很酷，而且会提高性能，正如您所提到的：）答案中包含了您的建议：）querySelector是Jquery的一部分吗？querySelector是Jquery的一部分吗？别客气。在我的书里找到的。看起来不是。
var inputElements = document.querySelectorAll('.className');
for(var i = 0, len = inputElements.length ; i < len ; i++) {
    inputElements[i].addEventListener('input', doSomethingFunction);
}