时间戳

首页 > 解决方案 > HTML 中的事件监听器与 addEventListener

javascript - HTML 中的事件监听器与 addEventListener

问题描述

我想向 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 属性来实现。此外，我想知道通常首选哪种方式添加事件处理程序。

标签： javascripthtmldom-eventsaddeventlistener

解决方案

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

但不推荐

推荐阅读