如何在表单提交中应用用于所有元素的相同事件侦听器？答案

【问题标题】：How can I apply the same event listener used for all elements on form submission?如何在表单提交中应用用于所有元素的相同事件侦听器？
【发布时间】：2019-10-08 16:35:24
【问题描述】：

这是我的 JSfiddle：https://jsfiddle.net/apasric4/p61wjf8a/

这是我的示例 JS 代码：

function createListener(input) {
  return (e)=> {
    const el=e.target;
    const inputValue=e.target.value;
    const validator=inputCheck(input)
    const valid=validator(inputValue);
    borderHighlight(valid, el)
  }
}

inputs.forEach(input=> {
  input.addEventListener("input", createListener(input))
})


function borderHighlight(valid, el) {
  (valid)? el.style.border='2px solid green':el.style.border='2px solid red'
}

myForm.addEventListener('submit', (e)=> {
  e.preventDefault()
  inputs.forEach(input=> {
    createListener(input)
  })
})

每个元素上的输入事件侦听器都非常适合它的功能。它在用户输入时提供实时错误消息。但是我希望该函数在用户提交表单时也做同样的事情（在附加到表单元素的提交事件上）？如何在我的代码中实现该功能？

【问题讨论】：

createListener(input) 返回一个函数，该函数将 javascript 事件作为参数以获取适当的元素。当您提交表单时，您实际上并没有该事件，因此许多 createListener 返回的函数将无法按原样工作，我建议您创建一个类似的函数，该函数接受元素作为参数而不是事件。

标签： javascript forms submit addeventlistener

【解决方案1】：

将验证代码放在命名函数中，以便您可以从两个事件侦听器中调用它。

function validate_input(el) {
    const inputValue=el.value;
    const validator=inputCheck(el)
    if (validator) {
        const valid= validator(inputValue);
        borderHighlight(valid, el);
    }
}

function createListener(input) {
    return e => validate_input(input);
}

inputs.forEach(input=> {
  input.addEventListener("input", createListener(input))
})


function borderHighlight(valid, el) {
  (valid)? el.style.border='2px solid green':el.style.border='2px solid red'
}

myform.addEventListener('submit', (e) => {
  e.preventDefault();
  inputs.forEach(input => validate_input(input));
});

【讨论】：

只是一个问题。为什么要为函数 validate-input 加下划线？
我习惯的风格是下划线而不是驼峰式。
嘿巴玛。代码的一个问题是它说验证器不是函数。这是为什么？否则我喜欢这个答案。
这听起来像是你的inputCheck() 函数的问题，它应该返回一个验证器函数。
是的，所以 checkInput 函数返回一个函数。我将该函数存储在变量验证器中，该函数随后接受一个参数。出于某种原因，它说它不是一个函数。

【解决方案2】：

稍微更改表单提交侦听器。调用从createListener返回的函数并传递一个假事件对象：{target: input}。

myForm.addEventListener('submit', (e)=> {
  e.preventDefault()
  inputs.forEach(input=> {
    createListener(input)({target: input});
  })
});

这样您就无需更改createListener 中的任何内容。

【讨论】：

这将在用户提交表单时为每个输入添加额外的侦听器。
@Barmar 不，监听器附加在一个单独的 forEach 循环中，但函数名称令人困惑。
对，我在想createListener 调用addEventListener。