从 html 调用 JavaScript 代码有多少种方法？

Posted 2023-02-22

【中文标题】从 html 调用 JavaScript 代码有多少种方法？

【英文标题】：How many ways are to call JavaScript code from html?

【发布时间】：2012-08-14 01:01:25

【问题描述】：

有多少种调用javascript代码的方法？首先是典型的<script>标签，然后是一些标签的属性，onload=""为body标签，href="JavaScript:"为a标签，onSubmit="JavaScript:"为form标签，onclick=属性。

除此之外，我知道代码也可以在加载完毕后从 javascript 加载：Include javascript file in chrome console.

但我对从 html 文档运行代码的方式更感兴趣，是否有详尽的列表：事件、属性、...？

【问题讨论】：

我想你已经掌握了我所知道的所有方法

【参考方案1】：

这里有一个很好的 JavaScript 事件列表：http://help.dottoro.com/larrqqck.php

至于如何触发这些事件，你已经涵盖了我所知道的所有基础。使用onload（和类似事件）有不同的方式，如下所示：

纯 JavaScript：

window.onload = function() 
  //Do Stuff

jQuery：

$(window).bind('onload', function() 
  //Do stuff
);

旁注：我不鼓励在 href="javascript:" 或 onsubmit="javascript:" 等属性中使用嵌入 JavaScript。像这样在 HTML 中嵌入 JavaScript 被认为是一种不好的做法，因为它会降低代码的可读性，并且可能更难以维护。

如果您需要侦听onsubmit 之类的事件，我建议您在 JavaScript/jQuery 中侦听这些事件，或者通过调用 JavaScript 函数，例如：onsubmit="javascript:myFunction(parameter)"，而不是编写所有的 JavaScript 内联的 HTML。那是我的两分钱。

希望对您有所帮助。

【讨论】：

我问这个有另一个原因，现在的趋势是 html5 应用程序，假设您想自动检查 html5 应用程序的一致性，并且您需要准确检查不建议使用代码的地方.了解这些案例的原因也很多，既有实用性也有教学性。

是的。很好的问题。 HTML5 趋向于更多地使用 JavaScript/AJAX 技术。恕我直言，onsubmit="javascript:" 一直是处理 JS 事件的懒惰方式。我从未见过现代 HTML5 Web 应用程序使用这种方法来处理事件。越来越多的应用程序使用上面列出的 jQuery 方法，因为许多现代 HTML5 网站都使用 jQuery 等框架。所以，如果你正在寻找我的意见，我会坚持这种方法。

【参考方案2】：

我建议您查看this post。基本上，有一些提到服务器端调用这些函数来对普通用户隐藏你的 javascript。

【讨论】：

即使您不想隐藏 javascript，它仍然是调用 javascript 函数/文件的另一种方式。

你想要混淆，一个同事向我展示的这个例子让我感到困惑：patriciopalladino.com/blog/2012/08/09/…，用这个patriciopalladino.com/files/hieroglyphy生成一个代码并尝试在控制台中评估它，我很惊讶。跨度>

@Eduard Florinescu。是的：我个人在寻找混淆，是的。但是，我也了解到服务器端脚本可以调用 JavaScript 文件/函数，这实际上与这里的主要问题有关。