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

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


当前回答

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

页面上有很多元素 要为单击事件注册的事件只有一个 你担心手机性能/电池寿命

I formed this opinion because of the fact that the JavaScript engines on mobile devices are 4 to 7 times slower than their desktop counterparts which were made in the same generation. I hate it when I visit a site on my mobile device and receive jittery scrolling because the jQuery is binding all of the events at the expense of my user experience and battery life. Another recent supporting factor, although this should only be a concern with government agencies ;) , we had IE7 pop-up with a message box stating that JavaScript process is taking to long...wait or cancel process. This happened every time there were a lot of elements to bind to via jQuery.

其他回答

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

Onclick函数Jquery

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

说你有一个按钮嵌套在Javascript/Jquery生成的html元素(.html()或.innerHTML类型的元素),然后你需要首先选择最外层的元素(父元素),并这样做

var parentElement = $('#outermostElement')
 parentElement.click('button', function(){
    console.log('clicked')
}) 

我所说的最外层元素是指嵌入.html()的元素

outermostElement.html("<div><button>click<button><div>")

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

就我个人而言,因为你正在使用jQuery,我会坚持使用它,因为它是一致的,并从脚本中解耦标记。

第一种方法是选择。它使用高级事件注册模型,这意味着您可以将多个处理程序附加到同一个元素。您可以轻松地访问事件对象,并且处理程序可以存在于任何函数的作用域中。此外,它是动态的,即它可以在任何时候被调用,特别适合于动态生成的元素。无论直接使用jQuery、其他库还是本地方法都无关紧要。

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

你关于性能或标准的问题不容易回答。这两种方法完全不同,做的事情也不一样。第一种更强大,而第二种则被鄙视(被认为是糟糕的风格)。