我有一个巨大的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
}

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


当前回答

你可以结合它们,使用jQuery将函数绑定到点击

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

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

其他回答

两者都不是更好的,因为它们可以用于不同的目的。onClick(实际上应该是onClick)执行得稍微好一点,但我高度怀疑你会注意到其中的差异。

值得注意的是,它们做不同的事情:.click可以绑定到任何jQuery集合,而onclick必须内联使用在你想要它绑定的元素上。您也可以使用onclick只绑定一个事件,而.click允许您继续绑定事件。

在我看来,我会保持一致,在任何地方都使用.click,并将所有JavaScript代码放在一起,与HTML分开。

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

$ (" # myDiv”)。click更好,因为它将JavaScript代码从HTML中分离出来。必须尽量保持页面行为和结构的不同。这很有帮助。

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout等事件实际上对性能不好(主要是在ie中,去想想)。如果您使用Visual Studio进行编码,当您使用这些代码运行一个页面时,其中的每一个都将创建一个单独的SCRIPT块,占用内存,从而降低性能。

更不用说你应该有一个分离的关注点:JavaScript和布局应该分开!

为这些事件创建evenHandlers总是更好的,一个事件可以捕获数百/数千个项目,而不是为每个事件创建数千个单独的脚本块!

(还有,所有人都在说的话。)

Onclick函数Jquery

$(" #选择器”).click(函数(){ / /你的功能 });

在我看来,你的问题并不是关于是否使用jQuery。而是:在HTML中内联绑定事件更好,还是通过事件监听器绑定事件更好?

不支持内联绑定。此外,通过这种方式,您只能将一个函数绑定到某个事件。

因此,我建议使用事件侦听器。通过这种方式,您将能够将许多函数绑定到单个事件,并在需要时稍后取消它们的绑定。考虑这段纯JavaScript代码:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

这在大多数现代浏览器中都有效。

然而,如果你已经在你的项目中包含了jQuery -只需使用jQuery: .on或.click函数。