jQuery.click() vs onClick

我有一个巨大的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。而是:在HTML中内联绑定事件更好，还是通过事件监听器绑定事件更好?

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

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

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

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

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

其他回答

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

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

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

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

这样做，因为它将为您提供标准和性能。

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

因为第二种方法是简单的JavaScript代码，比jQuery更快。但这里的性能大致相同。

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

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

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

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

推荐文章