将当前元素作为参数传递给循环内的回调函数

Question

我实际上是在做一个关于 HTML5 表单和自定义 UI 界面验证更新的非常简单的示例。在行为方面我非常接近结果，但是我在我的 JS 代码中遇到了一些细节。

基本上，我将输入事件附加到所有表单的输入元素。 回调函数只是检查当前元素的有效性并应用自定义类以“实时”方式设置元素的样式。

我面临的唯一问题是我需要将当前元素传递给事件处理程序中回调函数的参数。因为我需要将此事件附加到每个输入元素，所以我正在使用 for 循环。

我收到 jslint 警告：不要在循环中创建函数。

我不知道如何解决这个问题（我明白它的意思）。我不知道在不使用匿名函数的情况下将元素作为参数传递给回调函数。

所以问题是：如何将当前元素作为参数传递给外部函数以解决 jslint 警告。

如果有人有更好的方法来处理这个问题，并且可以将其纠正为更高效的代码，那将不胜感激。这个例子可以在以后为一些学生服务。

这是一个代码笔：http://codepen.io/anon/pen/bGDsB

Answer 1

你的情况可以通过替换for循环并添加一个函数来解决：

for (var i=0; i<inputs.length; i++) {
    attachCheck(inputs[i]);
}
function attachCheck(inp) {
    inp.addEventListener('input', function() {
        check(this);
    });
}

将check()修改为使用this不是更好吗，例如：

function check() {
    if(this.value.length) {
        // ... all elm replaced by this ...
}

还有循环：

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

Answer 2

您可以将check 直接传递给addEventListener()，而不是定义一个简单地调用check() 的新函数：

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

然后您可以稍微更改 check() 以解决此问题：

  function check(e) {
      var elm = e.srcElement;
      ...
  }

我没有针对 jsLint 对此进行测试，但它确实避免了在循环的每次迭代中创建一个新函数。