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

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

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

Answer 1

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

<form onsubmit="doSomething(event)">

Answer 2

使用第一个版本 - 但如果您只有一个表单，请不要使用 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>

但不推荐

HTML 中的事件侦听器与 addEventListener

Event listener in HTML vs. addEventListener

html

javascript

addeventlistener

dom-events