在HTML中调用函数与在Javascript中调用函数

我想问我在哪里调用我的函数是否有不同.例如，在提交表格时，首选/更好的方式是什么

1:

<form id="registerForm" action="javascript:register()">
   <label for="user">Username</label>
   <input id="user" name="user" type="text" />
   ...
   <button>Register</button>
</form>

或

const registerFormElement = document.querySelector("#registerForm");
registerFormElement.addEventListener("submit", (e) => {
  // some code ...
});

我总是使用第二种方法，但我在github上看到一些人使用第一个代码示例.