HTML与JavaScript中调用函数的差异及表单提交最优方式

先明确两种实现的代码示例：

示例1：内联action调用函数 #

<form action="javascript:register()">
  <!-- 表单元素 -->
  <button type="submit">提交</button>
</form>

示例2：addEventListener绑定submit事件 #

<form id="registerForm">
  <!-- 表单元素 -->
  <button type="submit">提交</button>
</form>
<script>
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();
  register();
});
</script>

两者的核心差异和优劣对比：

• 行为控制灵活性：
  示例1里，javascript:伪协议会直接替代默认表单提交行为，但没法灵活调整——比如想在表单验证通过时走原生提交、不通过时阻止，这种需求用内联action根本实现不了。而示例2可以通过e.preventDefault()精准控制，甚至能根据逻辑动态决定是否执行默认提交，灵活性拉满。

• 代码可维护性：
  示例1把JS逻辑硬塞在HTML属性里，违反了「结构（HTML）、行为（JS）分离」的原则，项目规模变大后，找逻辑、改逻辑会变得非常麻烦，也没法复用逻辑。示例2把JS和HTML完全分开，逻辑集中在脚本部分，结构清晰，调试和维护都轻松很多。

• 稳定性与错误处理：
  示例1有个致命问题：如果register()函数不存在、执行报错，浏览器会把脚本执行结果当作URL跳转，直接跳到显示undefined的空白页，用户体验极差。而示例2可以在事件处理函数里加try-catch捕获错误，或者做容错处理，绝不会出现这种意外跳转的情况。

• 性能与扩展性：
  示例2的事件监听方式支持事件委托，比如页面有10个表单，不用给每个表单都绑事件，只需要在父元素上监听一次submit事件即可，能减少内存占用。示例1做不到这点，每个表单都要单独写action，代码冗余且性能差。

总结：推荐哪种方式？ #

绝对优先选择示例2的addEventListener绑定方式，它是现代前端开发的标准实践，在灵活性、可维护性、稳定性上都全面碾压内联action的写法。

至于你在GitHub上看到有人用示例1，大概率是老项目遗留的写法，或者是快速写原型时图省事的临时方案，生产环境和需要长期维护的项目里，完全不推荐用这种方式。

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