我有一个巨大的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背后的主要思想之一是将JavaScript与令人讨厌的HTML代码分开。第一种方法是要走的路。

其他回答

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

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

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

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

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

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

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

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

jQuery背后的主要思想之一是将JavaScript与令人讨厌的HTML代码分开。第一种方法是要走的路。

恕我直言,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.