表单 onsubmit 属性中的“someFunction()”、“JavaScript:somFuction()”和“return someFunct()”有什么区别？答案

【问题标题】：What is the difference between "someFunction()", "JavaScript:somFuction()", and "return someFunct()" in form onsubmit attribute?表单 onsubmit 属性中的“someFunction()”、“JavaScript:somFuction()”和“return someFunct()”有什么区别？
【发布时间】：2021-07-22 03:52:01
【问题描述】：

我想知道以这些不同方式从表单调用 JavaScript 函数之间的区别。

方法一

<form onsubmit="someFunction()">

方法二

<form onsubmit="JavaScript:someFunction()">

方法3

<form onsubmit="return someFunction()">

我在任何 HTML5 form 文档中找不到任何提及 onsubmit 属性的内容（只有一些 HTML4 文档的信息）。我不应该使用它吗？在提交按钮上使用onclick 会更好吗？

【问题讨论】：

理想情况下你不应该做任何这些事情。
关于您调用“方法 2”的代码，您需要比 Fiven 更好的解释例如 :: 如果“someFunction”是用说 vbs 编写的，您必须在其中写 <form onsubmit = "VBScript:Call someFunction()">为了执行它，或者如果客户端 UA 不支持它，则优雅地失败。
@BekimBacaj — Firefox 和 Chrome 不会因为该代码而优雅地失败。他们都抛出 Uncaught SyntaxError: unexpected token: identifier （因为你有一个标签 VBScript: 然后是一个标识符 Call 然后是一个空格，后跟另一个标识符 someFunction）
@Quentin to bad firefox or chrome 当这是一个标准时甚至不存在，他们把它当作一个标签而不是一个语言定义，他们为此是绿色的。 Firefox 直到最近才知道他们应该使用 null 注册元素事件并使用 "" 进行注册 lol
@BekimBacaj — 所以你说的是曾经有一个标准（但你找不到这个标准来证明它），其中内在事件属性的行为不同，如果你编写的代码符合该标准，那么它会优雅地失败，但前提是最终用户使用的是 18 年前 之前的浏览器？

标签： javascript html forms onsubmit

【解决方案1】：

onsubmit="someFunction()"

调用函数

onsubmit="JavaScript:someFunction()"

相同，但带有一个完全没用的label。写它的人可能在href 属性中看到了javascript: scheme URL（这是一个糟糕的主意，除非您明确编写小书签）并落入cargo cult，不理解on* 属性期望它们的值是 JavaScript 而不是 URL。

onsubmit="return someFunction()"

相同，但提交事件处理函数返回函数返回的任何内容。如果它返回false，它会阻止表单提交的默认行为。

我在任何 HTML5 表单文档中都找不到关于 onsubmit 属性的任何提及

一般定义为here。

我不应该使用它吗？

内在事件属性违反separation of concerns的原则，并且有一些真正的unintuitive scoping rules，同时还依赖于从它们调用的函数为globals。

最好避免。

现代 JS 将使用 addEventListener 绑定事件处理程序，并使用 preventDefault 阻止表单提交的默认行为

在提交按钮上使用onclick会更好吗？

没有。表单提交可以通过其他机制触发，例如在文本输入中按 enter。虽然这可能会触发提交按钮上的点击事件，但最好说出您的意思。

【讨论】：