Some Conte..."> Some Conte..."/> Some Conte..."> Some Conte...">

jQuery.click()与onClick

JavaScript

乐小小猪猪

2020-03-12

我有一个庞大的jQuery应用程序,并且我将以下两种方法用于点击事件。

第一种方法

的HTML

<div id="myDiv">Some Content</div>

jQuery的

$('#myDiv').click(function(){
    //Some code
});

第二种方法

的HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScript函数调用

function divFunction(){
    //Some code
}

我在应用程序中使用第一种或第二种方法。哪一个更好?性能更好?和标准?

第1030篇《jQuery.click()与onClick》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
Sam蛋蛋Itachi 2020.03.12

第一种使用onclick方法不是jQuery,而是简单的Javascript,因此您不会得到jQuery的开销。如果您需要将选择器扩展到其他元素而无需将事件处理程序添加到每个元素,则可以通过选择器扩展jQuery方式,但是现在您有了它,是否需要使用jQuery只是一个问题。

就个人而言,由于您使用的是jQuery,因此我会坚持使用它,因为它是一致的,并且确实使标记与脚本脱钩。

小胖Green 2020.03.12

第一种方法是首选。它使用高级事件注册模型,这意味着您可以将多个处理程序附加到同一元素。您可以轻松访问事件对象,并且处理程序可以存在于任何函数的范围内。而且,它是动态的,即可以随时调用,特别适合动态生成的元素。不管您直接使用jQuery,其他库还是直接使用本机方法都没有关系。

第二种方法使用内联属性,需要大量全局函数(这会导致名称空间污染),并将内容/结构(HTML)与行为(JavaScript)混合在一起。不要使用它。

您对性能或标准的问题无法轻易回答。两种方法完全不同,并且执行不同的操作。第一个比较强大,而第二个则被鄙视(被认为是不好的风格)。

猴子古一蛋蛋 2020.03.12

好吧,jQuery的主要思想之一就是将JavaScript与讨厌的HTML代码分开第一种方法是要走的路。

DavaidHarry 2020.03.12

大多数情况下,当性能是唯一标准时,原生JavaScript方法是优于jQuery的更好选择,但是jQuery利用JavaScript并使开发变得容易。您可以使用jQuery,因为它不会降低性能。在您的特定情况下,性能差异是可以忽略的。

路易Near番长 2020.03.12
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

事件实际上对性能不利主要是Internet Explorer中,请参见图)。onclick,onmouseover,onmouseout等如果使用Visual Studio进行编码,则在使用这些代码运行页面时,其中的每一个都会创建一个单独的SCRIPT块,占用内存,从而降低性能。

更不用说您应该分开关注:JavaScript和布局应该分开!

最好为这些事件中的任何一个创建evenHandlers,一个事件可以捕获成千上万的项目,而不是为每个事件创建成千上万的单独脚本块!

(此外,其他所有人都在说。)

Mandy神乐 2020.03.12

恕我直言,仅当满足以下条件时,onclick才是.click的首选方法:

  • 页面上有很多元素
  • 单击事件仅注册一个事件
  • 您担心移动性能/电池寿命

我之所以形成这种观点,是因为移动设备上的JavaScript引擎比同代的台式机慢4至7倍。当我访问移动设备上的网站并收到滚动抖动时,我讨厌它,因为jQuery绑定了所有事件,但以牺牲用户体验和电池寿命为代价。另一个最近的支持因素,尽管这只应该是***机构关心的问题;),但我们在IE7弹出窗口中显示了一个消息框,指出JavaScript进程要花很长时间...等待或取消。每当有很多要通过jQuery绑定的元素时,就会发生这种情况。

神奇 2020.03.12

两种方法都可以用于不同的目的,这两者都不是更好的选择onClick(实际上应该是onclick)性能稍好一些,但是我非常怀疑您会注意到那里的区别。

值得注意的是,它们执行不同的操作:.click可以绑定到任何jQuery集合,而onclick必须在要绑定到其的元素上内联使用。您也只能将一个事件绑定到using onclick,而.click让您继续绑定事件。

在我看来,我会保持一致,只.click在各处使用它,并将所有 JavaScript代码放在一起,并与HTML分开。

不要使用onclick除非您知道自己在做什么,否则可能没有任何理由使用它。

乐小宇宙 2020.03.12

$('#myDiv').click更好,因为它将JavaScript代码与HTML分开必须设法使页面行为和结构保持不同这很有帮助。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android