Javascript 如何保持干燥-多个输入触发按键上的相同功能？

这是正在工作（但重复）的代码。我试图用“GetElementsByName”替换“getElementById”部分，在元素中添加一个类，但我没有这样做。现在，我为每个ID重复了一次匿名函数：

document.getElementById("gasCost").onkeypress = function(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}

HTML:

是否可以先定义函数并对每个ID调用它？有没有可能在课堂上采取不同的做法？我愿意接受所有建议，但我不想使用jQuery

function submitOnEnter(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}

document.getElementById("gasCost").onkeypress = submitOnEnter;
document.getElementById("mileage").onkeypress = submitOnEnter;

---

请注意，这已经是HTML表单中的默认行为：按enter键提交表单。

如果要使用类，可以执行以下操作：

function keyHandler(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}
var elements = document.getElementsByClassName("yourclasshere");
for (var i = 0; i < elements.length; i++)
    elements[i].onkeypress = keyHandler;

演示：

---

这是因为关键事件从源元素（您的输入）通过所有容器“冒泡”，直到到达文档。（因此，在最坏的情况下，您可以将处理程序直接绑定到文档。）您可以通过检查

event.target

（或

event.srcElement

（对于较旧的IE）。

Prototype呢？扩展html元素是一种不好的做法，但是使用Prototype你可以做到这一点。谢谢你的提示！我试图避免使用框架，因为我在学习过程中还很早。我想先建立一个坚实的基础。一旦我理解了JS，我会把它添加到我的框架列表中去。啊，问题是我把它写成了submitontenter（）；-有人能准确地解释一下括号是如何打破这一点的吗？

function keyHandler(e) {
    if(e.keyCode == 13) {
        goButton();
    }
}
var elements = document.getElementsByClassName("yourclasshere");
for (var i = 0; i < elements.length; i++)
    elements[i].onkeypress = keyHandler;

document.getElementById("someContainer").onkeypress = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (e.keyCode === 13 && e.target.tagName === "INPUT") {
        goButton();
    }
};