2

考虑下面的简单链接：

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

我了解当用户单击此元素时，有两种方法可以运行函数：

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

和

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

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

4

4 回答 4

4

使用更好$('.mylink').click(function(){，因为它遵循标准事件注册模型。（jQuery内部使用and ）。addEventListenerattachEvent

基本上以现代方式注册事件是处理事件的不显眼的方式。此外，要为目标注册多个事件侦听器，您可以addEventListener()为同一个目标调用。

阅读jQuery.click() 与 onClick 以及内联 Javascript（在 HTML 中）如何工作？

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

于 2013-11-09T14:31:37.027 回答
1

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

区别在于代码的模块化和可维护性。

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

如果您在 HTML 的早期工作过，那么您应该记得所有这些属性（如background, color, font... 等）是什么时候出现的。

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

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

编辑：为了更准确，引用@mplungjan 评论：

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

于 2013-11-09T14:31:55.823 回答
0

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

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

我绝对推荐 JQuery！

于 2013-11-09T14:33:21.643 回答
-1

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

于 2013-11-09T14:31:26.317 回答