Question

考虑下面的简单链接：

<a href="#" class="mylink">Link</a>

据我所知，当用户点击此元素时，有两种方法可以运行函数：

$(".mylink").click(function () {

和

<a href="javascript:myfunction();" class="mylink">Link</a>

这两者之间是否存在性能差异，或者我应该使用另一个的任何其他实际原因？

Answer 1

使用$('.mylink').click(function(){ 更好，因为它遵循标准事件注册模型。（jQuery internally使用addEventListener和attachEvent）。

基本上在modern way中注册事件是unobtrusive处理事件的方式。另外，要为目标注册多个事件侦听器，可以为同一目标调用addEventListener()。

阅读jQuery.click() vs onClick 和How does inline Javascript (in HTML) work?

https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting

Answer 2

它们具有相同的功能行为，没有任何区别。

不同之处在于代码模块化和可维护性。

使用第一种方法是首选且更合适的，因为它不会混合使用HTML和JavaScript，这个概念称为 Unobtrusive JavaScript 。

如果您在HTML的早期工作过，那么您应该记住何时存在所有这些属性，例如background，color，font等等。

然后CSS进来了，每个人都告诉我们不再使用那些旧属性，因为它们将表示与文档结构混合在一起，而是应该使用CSS来控制文档的布局和外观。

这与该想法类似，但它现在用于代码，与文档结构分开的功能。

编辑：引用@mplungjan评论以便更准确：

没有区别是不正确的。 href =“javascript：myFunction（）”无法使用preventDefault取消实际点击或返回false。因此，GIF动画将停止在某些浏览器中运行，旧版浏览器甚至会部分卸载页面。此外，如果函数返回一个值，页面将替换为该值，初学者尝试href =“javascript：window.open ...”并在页面上获取[object object]时看到

Answer 3

与任何其他优秀的JavaScript框架一样，Jquery为您提供独立于浏览器平台的功能，包含所有复杂的功能，您可能不关心或不想关注它们。

我认为使用框架更好，而不是使用纯JavaScript并从头开始做所有事情，除非你的使用非常有限。

我绝对推荐JQuery！

Answer 4

第一个是事件监听器的JQuery约定。您需要包含jquery库才能使用它。第二个是Javascript约定。您无需包含任何库或额外代码即可运行。性能方面没有差异，但正如我所说，如果你不想包含任何类型的库，你应该使用第二个例子。

.click（function（）{和javascript：myfunction（）之间有什么区别？

4 个答案: