使用 addEventListener onSubmit 表单答案

【问题标题】：using addEventListener onSubmit form使用 addEventListener onSubmit 表单
【发布时间】：2016-06-16 00:04:23
【问题描述】：

我对 HTML 和 JavaScript 还是很陌生。下面是示例代码。下面的代码块与 onsubmit 作为表单标签属性一起工作正常

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Tags</title>
</head>

<body>

  <form id="form1" action="#" onsubmit="functSubmit()">
    <label for="input1">This text will be passed in CustomeEvent</label>
    <input id="input1" type="text" value="default">
    <input type="submit" id="bt1">
  </form>

  <script>
    function functSubmit(event) {

      var msg = document.getElementById("input1").value;
      alert(msg);
    }
  </script>

</body>    
</html>

但是当我用 addEventListener() 编写下面的代码时它不起作用。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Tags</title>
</head>

<body>

  <form id="form1" action="#">
    <label for="input1">This text will be passed in CustomeEvent</label>
    <input id="input1" type="text" value="default">
    <input type="submit" id="bt1">
  </form>

  <script>
    document.getElementById("form1").addEventListener('submit', functSubmit(event));

    function functSubmit(event) {
      var msg = document.getElementById("input1").value;
      alert(msg);
    }
  </script>

</body>
</html>

谁能解释为什么 addEventListener 不起作用？

【问题讨论】：

标签： javascript html forms events

【解决方案1】：

这是因为您会立即调用事件侦听器的回调。只需将函数作为参数传递，而不调用它。每当提交表单时，该函数都会将事件对象传递给它。

document.getElementById("form1").addEventListener('submit', functSubmit);

function functSubmit(event) {
  var msg = document.getElementById("input1").value;
  alert(msg);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Tags</title>
</head>

<body>

  <form id="form1" action="#">
    <label for="input1">This text will be passed in CustomeEvent</label>
    <input id="input1" type="text" value="default">
    <input type="submit" id="bt1">
  </form>

</body>

</html>

附带说明：将 HTML 的关注点与 JavaScript 分开通常是更好的做法。虽然在属性中内联事件处理程序是可行的，但它结合了两个独立的问题。为了可维护性，单独管理您的处理程序。您还可以获得利用事件委托的好处。

【讨论】：

【解决方案2】：

您正在调用 functSubmit 并将结果传递给 addEventListner 函数。

相反，你想要这样的东西

<form id="form1" action="#" onsubmit="functSubmit()">

或

document.getElementById("form1").addEventListener('submit',functSubmit);
function functSubmit(event) {
  var msg  = document.getElementById("input1").value;
  alert(msg);
}

event 已经被functSubmit 函数的调用者传入。

【讨论】：

【解决方案3】：

我认为你只能传递一个字符串作为函数名。你可以试试

document.getElementById("form1").addEventListener('submit', function(event){
    functSubmit(event);
});

【讨论】：