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

Question

这是我的 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)

  })

})

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

Answer 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));});

Answer 2

稍微更改表单提交侦听器。调用从返回的函数createListener并传递一个假事件对象：{target: input}。myForm.addEventListener('submit', (e)=> {  e.preventDefault()  inputs.forEach(input=> {    createListener(input)({target: input});  })});这样你就不需要在createListener.