JavaScript：HTML 中的事件侦听器与 addEventListener

Question

我想向 HTML 元素添加一个事件侦听器，该元素用自定义行为替换默认行为。 我知道添加事件侦听器的两种不同方法：(1) 使用 JavaScript 函数addEventListener将事件添加到 DOM 元素：

<form class="my-form">
  <input type="submit"/>
</form>
<script>
  document.querySelectorAll(".my-form").forEach(form => {
    form.addEventListener("submit", doSomething);
  });
  function doSomething(e) {
    e.preventDefault();
    console.log("Data received");
  }
</script>

(2) 使用on*的 HTML 属性：

<form onsubmit="doSomething()">
  <input type="submit"/>
</form>
<script>
  function doSomething(e) {
    e.preventDefault();
    console.log("Data received");
  }
</script>

然而，第一个做了它应该做的，第二个没有。 第二个代码仍然使用默认的提交处理程序。 所以，我想知道第一个示例的行为是否可以通过 HTML 属性实现。 此外，我想知道通常首选哪种添加事件处理程序的方式。

Answer 1

使用第一个版本 - 但如果您只有一个表单，请不要使用 querySelectorAll。 如果您只有一个表单，请为其指定一个 ID 并改用 document.getElementById。

如果你有很多，我会委托：

<div id="formContainer">
  <form class="my-form">
    <input type="submit"/>
  </form>
  <form class="my-form">
    <input type="submit"/>
  </form>
</div>
<script>
  document.getElementById("formContainer").addEventListener("submit", function(e) {
    e.preventDefault();
    console.log("Data received");
  });

</script>

做第二个，我们在上个千年里曾经这样做过

<form onsubmit="return doSomething()">
  <input type="submit"/>
</form>
<script>
  function doSomething() {
    console.log("Data received");
    return false
  }
</script>

但不推荐

Answer 2

在第二种情况下，您不带参数调用doSomething() ，因此e将是undefined 。 您需要明确地将事件作为参数传递：

<form onsubmit="doSomething(event)">