性能

Question

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

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

Answer 1

使用$('#myDiv').click(function(){ 更好，因为它遵循标准事件注册模型。（jQuery internally使用addEventListener和attachEvent）。

基本上在modern way中注册事件是unobtrusive处理事件的方式。另外，要为目标注册多个事件侦听器，可以为同一目标调用addEventListener()。

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Why use addEventListener? （来自MDN）

addEventListener是按指定注册事件侦听器的方法   在W3C DOM中。它的好处如下：


它允许为事件添加多个处理程序。这对于DHTML库或Mozilla扩展特别有用   即使使用其他库/扩展，也需要正常工作。

当听众被激活时（捕捉与冒泡），它可以让你对相位进行更精细的控制。

它适用于任何DOM元素，而不仅仅是HTML元素。

有关现代事件注册的更多信息 - ＆gt; http://www.quirksmode.org/js/events_advanced.html

其他方法，例如设置HTML attributes，例如：

<button onclick="alert('Hello world!')">

或DOM element properties，例如：

myEl.onclick = function(event){alert('Hello world');};

很旧，很容易写过。

应该避免使用

HTML属性 ，因为它会使标记更大，可读性更低。对内容/结构和行为的关注并没有很好地分离，使得更难找到bug。

DOM元素属性 方法的问题是每个事件只能绑定一个元素。

有关传统事件处理的更多信息 - ＆gt; http://www.quirksmode.org/js/events_tradmod.html

MDN参考：https://developer.mozilla.org/en-US/docs/DOM/event

Answer 2

为了获得更好的性能，请使用本机JavaScript。为了加快开发速度，请使用jQuery。检查 jQuery vs Native Element Performance 的效果比较。

我在Windows Server 2008 R2 / 7 64位上的Firefox 16.0 32位测试

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

对于点击事件，请检查 Native Browser events vs jquery trigger 或 jQuery vs Native Click Event Binding 。

在Windows Server 2008 R2 / 7 64位上以32位格式在Chrome 22.0.1229.79中进行测试

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

Answer 3

据我所知，你的问题不在于是否使用jQuery。更确切地说：在HTML中或通过事件监听器内联绑定事件是否更好？

不推荐使用内联绑定。此外，您只能将一个函数绑定到某个事件。

因此我建议使用事件监听器。这样，您就可以将许多函数绑定到单个事件，并在以后根据需要取消绑定它们。考虑这个纯JavaScript代码：

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

这适用于大多数现代浏览器。

但是，如果您已在项目中包含jQuery - 只需使用jQuery：.on或.click函数。

Answer 4

为此而努力，因为它将为您提供标准和性能。

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

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

Answer 5

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

Answer 6

你可以将它们组合起来，使用jQuery将函数绑定到click

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

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

function divFunction(){
 //some code
}

Answer 7

恕我直言，onclick是仅在满足以下条件时优先于.click的方法：

页面上有许多元素
只有一个要为点击事件注册的事件
您担心移动性能/电池续航时间

我之所以形成这种观点，是因为移动设备上的JavaScript引擎比同一代产品中的桌面版本慢了4到7倍。当我访问我的移动设备上的网站并接收抖动滚动时，我讨厌它，因为jQuery以牺牲我的用户体验和电池寿命为代价来绑定所有事件。另一个最近的支持因素，虽然这应该只是政府机构关注的问题;），我们有一个IE7弹出窗口，上面有一个消息框，说明JavaScript进程需要很长时间......等待或取消进程。每当有很多元素通过jQuery绑定时就会发生这种情况。

Answer 8

作品的差异。如果使用click（），则可以添加多个函数，但如果使用属性，则只执行一个函数 - 最后一个函数。

<强> DEMO

<强> HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

<强> 的JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

如果我们谈论性能，在任何情况下直接使用总是更快，但使用属性，您将只能分配一个功能。

Answer 9

关注点的分离是关键，因此事件绑定是普遍接受的方法。这基本上是许多现有答案所说的。

然而不要过快地抛弃声明性标记的想法。它有它的位置，并且像Angularjs这样的框架是其核心。

需要了解整个<div id="myDiv" onClick="divFunction()">Some Content</div>被如此严重羞辱，因为它被一些开发人员滥用。所以它达到了亵渎神圣的程度，就像tables一样。一些开发人员实际上避免使用tables表格数据。这是人们在不理解的情况下行事的完美典范。

虽然我喜欢将自己的行为与我的观点分开的想法。我发现标记声明它它没有问题（不是如何它做的，这是行为）。它可能是实际的onClick属性或自定义属性的形式，就像bootstraps javascript组件一样。

这样，通过只看一下标记，你可以看到它做了什么，而不是试图反向查找javascript事件绑定器。

因此，作为上述内容的第三种替代方法，使用数据属性来声明性地宣告标记内的行为。行为被排除在视野之外，但一眼就能看出发生了什么。

Bootstrap示例：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

来源：http://getbootstrap.com/javascript/#popovers

注意第二个例子的主要缺点是全局命名空间的污染。这可以通过使用上面的第三个替代方案，或者像Angular这样的框架及其具有自动范围的ng-click属性来规避。

Answer 10

两者都不是更好，因为它们可能用于不同的目的。 onClick（实际应该是onclick）表现得稍微好一点，但我非常怀疑你会注意到那里的差异。

值得注意的是，他们做了不同的事情：.click可以绑定到任何jQuery集合，而onclick必须在您希望它绑定到的元素上内联使用。您还可以仅将一个事件绑定到使用onclick，而使用.click可以继续绑定事件。

在我看来，我会对此保持一致，只是在任何地方使用.click并将所有的JavaScript代码保存在一起并与HTML分开。

请勿使用onclick。没有任何理由使用它，除非你知道你在做什么，而你可能不知道。

Answer 11

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

onclick，onmouseover，onmouseout等事件实际上对性能不利（主要在 Internet Explorer 中，如图所示）。如果使用Visual Studio进行编码，当您运行带有这些内容的页面时，每个页面都会创建一个单独的SCRIPT块占用内存，从而降低性能。

更不用说你应该有一个separation of concerns：JavaScript和布局应该分开！

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

（另外，其他人都在说。）

Answer 12

嗯，jQuery背后的一个主要想法是将JavaScript与讨厌的HTML代码分开。第一种方法是要走的路。

Answer 13

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

Answer 14

使用onclick的第一种方法不是jQuery而只是Javascript，所以你不会得到jQuery的开销。如果你需要将jQuery方法添加到其他元素而不向每个元素添加事件处理程序，那么jQuery方式可以通过选择器进行扩展，但是现在你只需要使用jQuery就可以了。

就个人而言，由于你使用的是jQuery，我会坚持使用它，因为它是一致的，并且会将标记与脚本分离。

Answer 15

第一种方法是喜欢。它使用advanced event registration model[s]，这意味着您可以将多个处理程序附加到同一个元素。您可以轻松访问事件对象，处理程序可以存在于任何函数的范围内。而且，它是动态的，即它可以在任何时间调用，特别适合动态生成的元素。无论您是使用jQuery，还是其他库或本机方法都无关紧要。

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

您无法轻易回答有关性能或标准的问题。这两种方法完全不同，并做了不同的事情。第一个是更强大的，而第二个被鄙视（被认为是不好的风格）。

Answer 16

性能

然而，这里已经有很多不错的答案，作者有时会提到性能，但实际上还没有人对此进行调查-因此，我将在这里集中讨论这一方面。今天，我在Chrome 83.0，Safari 13.1和Firefox 77.0上进行测试，以了解有问题的解决方案以及其他替代解决方案（其中一些在其他答案中也有提及）。

结果

我在这里比较解决方案A-H，因为它们在元素id上运行。我还将显示使用class（I，J，K）作为参考的解决方案的结果。

基于html内联处理程序绑定（B）的解决方案对于Chrome来说是最快，最快的，对于少量元素来说是最快的

getElementById

解决方案速度很快，对于Safari和Firefox而言，对于大量元素而言最快。
基于引用I，J的解决方案对于大量元素最快，因此在这种情况下值得考虑使用class而非id方法
基于jQuery.click（A）的解决方案最慢

详细信息

实际上，为这个问题设计性能测试并不容易。我注意到，对于所有经过测试的解决方案，用于10K div-s的触发事件的性能都是很快的，并且手动无法检测到它们之间的任何差异（您可以在以下代码段中运行以自行检查）。因此，我主要关注两种情况下生成html和绑定事件处理程序的执行时间

10 div秒-您可以运行测试HERE
1000 div秒-您可以运行测试HERE

// https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick
let a= [...Array(10000)];

function clean() { test.innerHTML = ''; console.clear() }

function divFunction(el) {
  console.log(`clicked on: ${el.id}`);
}

function initA() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> $(`#myDiv${i}`).click(e=> divFunction(e.target)));
}

function initB() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box" onclick="divFunction(this)">${i}</div>`).join``;
}

function initC() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> document.getElementById(`myDiv${i}`).onclick = e=> divFunction(e.target) );
}

function initD() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> document.getElementById(`myDiv${i}`).addEventListener('click', e=> divFunction(e.target) ));
}

function initE() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> document.querySelector(`#myDiv${i}`).onclick = e=> divFunction(e.target) );
}

function initF() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> document.querySelector(`#myDiv${i}`).addEventListener('click', e=> divFunction(e.target) ));
}

function initG() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> window[`myDiv${i}`].onclick = e=> divFunction(e.target) );
}

function initH() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  a.map((x,i)=> window[`myDiv${i}`].addEventListener('click',e=> divFunction(e.target)));
}

function initI() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  [...document.querySelectorAll(`.box`)].map(el => el.onclick = e=> divFunction(e.target));
}

function initJ() {
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  [...document.querySelectorAll(`.box`)].map(el => el.addEventListener('click', e=> divFunction(e.target)));
}

function initK() {  
  test.innerHTML = a.map((x,i)=> `<div id="myDiv${i}" class="box">${i}</div>`).join``;
  $(`.box`).click(e=> divFunction(e.target));
}



function measure(f) {  
  console.time("measure "+f.name);
  f();
  console.timeEnd("measure "+f.name)
}

#test {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 1px;
  height: 10px;
  background: red;
  font-size: 10px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>This snippet only presents used solutions. Click to solution button and then click on any red box to trigger its handler</div>
<button onclick="measure(initA)">A</button>
<button onclick="measure(initB)">B</button>
<button onclick="measure(initC)">C</button>
<button onclick="measure(initD)">D</button>
<button onclick="measure(initE)">E</button>
<button onclick="measure(initF)">F</button>
<button onclick="measure(initG)">G</button>
<button onclick="measure(initH)">H</button>
<button onclick="measure(initI)">I</button>
<button onclick="measure(initJ)">J</button>
<button onclick="measure(initK)">K</button>
<button onclick="clean()">Clean</button>

<div id="test"></div>

以下是针对Chrome的示例测试

Answer 17

Onclick函数Jquery

$('#selector').click(function(){ //Your Functionality });

jQuery.click（）vs onClick

HTML

的jQuery

HTML

JavaScript函数调用

17 个答案:

性能

结果

详细信息