以下是几种常见的 form 表单监听 submit 事件的触发方法： #### HTML 内联事件处理 在 `form` 标签中直接使用 `onsubmit` 属性来指定事件处理函数。示例代码如下： ```html <form onsubmit="return validateForm();"> <input type="text" name="username"> <input type="submit" value="Submit"> </form> <script> function validateForm() { // 这里可以添加表单验证逻辑 return true; // 返回 true 允许表单提交，返回 false 阻止表单提交 } </script> ``` #### JavaScript 监听 通过 `addEventListener` 方法来监听表单的 `submit` 事件。示例代码如下： ```html <form id="myForm"> <input type="text" name="username"> <input type="submit" value="Submit"> </form> <script> const form = document.getElementById('myForm'); form.addEventListener('submit', function(event) { // 这里可以添加表单验证逻辑 if (/* 验证不通过的条件 */) { event.preventDefault(); // 阻止表单默认提交行为 } }); </script> ``` #### jQuery 监听 如果项目中使用了 jQuery，可以使用 `submit()` 方法来监听表单的提交事件。示例代码如下： ```html <form id="myForm"> <input type="text" name="username"> <input type="submit" value="Submit"> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $('#myForm').submit(function(event) { // 这里可以添加表单验证逻辑 if (/* 验证不通过的条件 */) { event.preventDefault(); // 阻止表单默认提交行为 } }); </script> ``` #### 动态触发 submit 事件 可以通过 JavaScript 调用表单的 `submit()` 方法来触发表单提交。示例代码如下： ```html <form id="myForm"> <input type="text" name="username"> <button type="button" onclick="submitForm()">Submit</button> </form> <script> function submitForm() { const form = document.getElementById('myForm'); form.submit(); } </script> ``` 需要注意的是，动态调用 `form.submit()` 方法不会触发 `onsubmit` 事件。如果想要捕捉到 `form.submit()`，可以在 `form.submit()` 方法之前加上 `form.fireEvent("onsubmit");`（该方法在旧版 IE 浏览器中使用），或者使用 jQuery 的 `submit()` 方法来提交表单，这样可以被监听到 [^3]。