JS DOM中为form绑定submit事件时内部按钮的行为机制说明

这是HTML表单的原生标准行为，属于前端处理表单的常规写法，不需要额外给按钮绑定事件就能生效，核心逻辑如下：

表单内置的默认提交规则 #

浏览器对<form>元素做了原生的交互约定，不需要JS额外处理就自带提交触发逻辑：

• 放在<form>标签内部的<button>如果没有手动指定type属性，默认type值就是submit，本身就是表单的默认提交触发器，点击后会自动触发表单的提交流程
• 除了点击提交按钮，用户在表单内的文本输入框中按下回车键，也会自动触发表单提交，和点击按钮的效果完全一致
• 上述操作触发的submit事件本身就是绑定在<form>元素上的，不管通过哪种方式触发提交，事件都会被form元素上绑定的监听器捕获到

对应示例代码的具体说明 #

你贴的代码里的添加书籍表单结构如下：

<form id="add-book">
  <input type="checkbox" id="hide" />
  <label for="hide">Hide all books</label>
  <input type="text" placeholder="Add a book..." />
  <button>Add</button>
</form>

其中的<button>Add</button>没有指定type属性，浏览器会自动将其识别为提交按钮。点击这个按钮时，浏览器会自动执行原生表单提交流程，触发form元素上的submit事件，因此JS代码只需要给form绑定事件监听器就能响应提交操作。
代码里写的e.preventDefault()作用是阻止表单提交后自动刷新页面的原生默认行为，之后再获取输入框的值执行自定义逻辑，这也是前端处理表单的标准写法。

几个容易混淆的注意点 #

• 如果给按钮手动加上type="button"属性，它就会变成普通按钮，不会自动触发表单提交，这种场景下才需要手动给按钮绑定click事件，主动调用表单的submit()方法触发提交
• 如果按钮放在<form>标签外部，即使设置了type="submit"也不会自动触发对应表单的提交，除非给按钮添加form="对应表单的id"属性做关联
• 直接给form绑定submit事件比单独给按钮绑定click事件更合理：可以自动覆盖输入框按回车提交的场景，减少重复的事件绑定代码，逻辑更严谨

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