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

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.