Question

我是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不起作用？

Answer 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分开。虽然在属性中内联您的事件处理程序，但它会将两个不同的问题联系在一起。出于可维护性的考虑，请单独管理处理程序。您还可以利用事件委派来获益。

Answer 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函数的调用者传入。

Answer 3

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

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

使用addEventListener onSubmit表单

3 个答案: