按回车提交表单触发什么事件？原生JS如何监听回车提交

首先明确一点：在表单输入框中按回车键提交时，和点击提交按钮一样，都会触发表单的submit事件。你遇到的“点击按钮能触发但回车不行”的情况，大概率是事件监听的绑定目标或方式导致的问题。

问题根源分析 #

你当前把submit事件绑定在了document上，这种方式依赖事件冒泡机制。如果表单的submit事件在冒泡到document之前被其他代码用stopPropagation()阻止，就会出现你描述的异常情况——虽然点击提交按钮时事件能正常冒泡，但回车触发的提交可能在冒泡过程中被拦截了。

解决方案：直接绑定表单元素的submit事件 #

这是最可靠的做法，不管是点击提交按钮还是回车提交，都能稳定监听到事件：

<form> 
  <div>Name:</div> 
  <input name="firstname" id="typeTracking" type="text"> 
  <input value="Submit" id="submitTracking" type="submit"> 
</form>

<script>
function doFancyThings(e) {
  // 务必阻止浏览器默认的表单提交行为，避免页面自动刷新
  e.preventDefault();
  console.log("表单提交触发了！无论是点击按钮还是回车");
  // 在这里编写你的业务逻辑
}

// 获取目标表单元素
const form = document.querySelector('form');
// 直接给表单绑定submit事件监听
form.addEventListener('submit', doFancyThings);
</script>

额外补充：浏览器默认提交规则 #

浏览器对表单回车提交有默认的行为逻辑：

• 如果表单内存在type="submit"的按钮，在任意输入框按回车都会自动触发表单的submit事件。
• 即便表单里没有提交按钮，只要有一个文本输入框，按回车也会触发submit事件。

如果坚持要绑定在document上，你可以检查是否有其他代码在表单的submit事件中调用了e.stopPropagation()，阻止了事件冒泡到document层级。不过还是更推荐直接绑定表单元素，逻辑更清晰，也能避免不必要的冒泡问题。

内容的提问来源于stack exchange，提问作者bork