HTML 中的事件监听器与 addEventListener答案

【问题标题】：Event listener in HTML vs. addEventListenerHTML 中的事件监听器与 addEventListener
【发布时间】：2021-12-27 06:38:02
【问题描述】：

我想向 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)使用HTML属性on*:

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

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

【问题讨论】：

事件对象没有被传递给内联事件监听器。因此，您不能在其中调用 e.preventDefault。

标签： javascript html dom-events addeventlistener

【解决方案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>

但不推荐

【讨论】：

感谢您的回答。前段时间，我想我读到应该更喜欢使用 CSS 选择器而不是 ID。除了可能的性能优势之外，document.getElementById 是否还有其他优势？
这更有意义。它告诉我们你在页面上有一个特定的元素。如果您在 querySelectorAll 上使用 forEach，它将适用于一个或多个元素，但如果我阅读它，我也会期望多个元素。是的，使用 getElementById 更快

【解决方案2】：

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

<form onsubmit="doSomething(event)">

【讨论】：

那么，event 是onsubmit 属性内的有效变量吗？
是的。您可以使用event 和this。
我明白了。谢谢。