onsubmit 方法 vs 提交事件监听器

Question

我一直在为一门课程编写邮件程序，我遇到了我不理解的与阻止通过 return 提交表单相关的行为 false:

案例 1：未正确阻止表单提交，DOM 重新加载时出现 200 错误

document.querySelector('#compose-form').addEventListener('submit', () => {

send_email();

load_mailbox('inbox');

return false;

})

案例 2：表单提交被正确阻止并且 DOM 未重新加载 return 预期的 201 代码

document.querySelector('#compose-form').onsubmit = () => {

send_email();

load_mailbox('inbox');

return false;

}

Answer 1

区别在于onsubmit替换了当前（已经分配）的函数。另一方面，addEventListener 向已经存在的属性添加了一个附加命令。

因此，在您使用 addEventListener 的情况下，您需要使用 preventDefault 函数来防止默认行为。

试试这个：

// add event as an argument
document.querySelector('#compose-form').addEventListener('submit', (event) => {
  event.preventDefault(); // add this line

  // and then do your stuff
  send_email();
  load_mailbox('inbox');
  return false;

})

onsubmit 方法 vs 提交事件监听器

onsubmit method vs submit event listener

javascript

dom-events