为什么 EventListener 会重新加载页面而 onclick 不会？

Question

我最近在提交表单时遇到页面重新加载的问题。我终于发现当我使用 EventListener 提交表单时页面会重新加载，但它不会使用 onclick 表单提交重新加载。下面的代码是我测试的方式。有人可以向我解释为什么吗？

<html>
  <head>
    <title>Reload Page Test</title>
    <script>
      document.addEventListener("DOMContentLoaded", function () {

        document.querySelector("#asubmit").addEventListener("click", test);

        document.querySelector("#bsubmit").onclick = test;
        
        function test(){
          const name = document.getElementById("name").value;
          const age = document.getElementById("num").value;
          document.getElementById(
            "result"
          ).innerHTML = `${name} is ${age}years old.`;
          return false;
        };

      });
    </script>
  </head>
  <body>

    <div>
      <form>
        <input type="text" id="name" />
        <input type="number" id="num" />
        <input type="submit" id="asubmit" value="Event Listener Submit"/>
        <input type="submit" id="bsubmit" value="On Click Submit">
      </form>`enter code here`
    </div>
    <div id="result"></div>

  </body>
</html>

Answer 1

从 onclick 函数返回 false 将阻止默认行为。

事件侦听器回调的 return 值没有意义。

改用event.preventDefault()。

function test(event) {
    // ...
    event.preventDefault();
}

为什么 EventListener 会重新加载页面而 onclick 不会？

Why EventListener reloads the page and onclick does not?

html

javascript

forms

onclick

event-listener