jQuery.click()vs onClick

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 内部使用addEventListener和attachEvent).

基本上以现代方式注册事件是处理事件的不引人注目的方式.另外,要为目标注册多个事件侦听器,您可以调用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/

为什么要使用addEventListener？(来自MDN)

addEventListener是注册W3C DOM中指定的事件侦听器的方法.它的好处如下:

• 它允许为事件添加多个处理程序.这对于即使使用其他库/扩展也需要正常工作的DHTML库或Mozilla扩展特别有用.
• 当监听器被激活时(捕获与冒泡),它可以让您对阶段进行更细粒度的控制
• 它适用于任何DOM元素,而不仅仅是HTML元素.

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

其他方法,如设置HTML属性,例如:

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

或DOM元素属性,例如:

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

很老,他们可以轻易写完.

应避免使用 HTML属性,因为它会使标记更大且可读性更低.对内容/结构和行为的担忧并没有很好地分离,使得更难找到bug.

与该问题DOM元素性质的方法是,只有一个事件处理程序可以绑定到每个事件的元件.

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

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

Answer 2

为了获得更好的性能,请使用本机JavaScript.为了加快开发速度,请使用jQuery.检查jQuery与Native Element Performance的性能比较.

我已经在Windows Server 2008 R2/7 64位上使用32位Firefox 16.0进行了测试

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

对于单击事件,请检查本机浏览器事件与jquery触发器或jQuery与本机单击事件绑定.

在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

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

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

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

function divFunction(){
 //some code
}

Answer 5

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

Answer 6

为此,它将为您提供标准和性能.

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

因为第二种方法是简单的JavaScript代码,并且比jQuery更快.但这里的表现大致相同.

Answer 7

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

• 页面上有很多元素
• 只有一个事件要为click事件注册
• 你担心移动性能/电池寿命

我之所以形成这种观点,是因为移动设备上的JavaScript引擎比同代产品中的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

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

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

更不用说您应该分离关注点：JavaScript 和布局应该分离！

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

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

Answer 11

表现

这里已经有很多很好的答案，然而，作者有时会提到性能，但实际上还没有人调查它 - 所以我将在这里重点关注这个方面。今天，我在 Chrome 83.0、Safari 13.1 和 Firefox 77.0 上进行测试，以获得有问题的解决方案以及一些替代解决方案（其中一些在其他答案中提到过）。

结果

我在这里比较解决方案啊，因为它们对元素进行操作id。我还展示了使用class(I,J,K) 作为参考的解决方案的结果。

• 基于 html 内联处理程序绑定 (B) 的解决方案对于 Chrome 来说速度最快，对于少量元素来说速度最快
• 基于getElementById(C,D) 的解决方案速度很快，对于大量元素，在 Safari 和 Firefox 上速度最快
• 基于 I、J 的参考解决方案对于大量元素而言速度最快，因此在这种情况下值得考虑使用class替代id方法
• 基于 jQuery.click (A) 的解决方案是最慢的

细节

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

• 10秒 - 您可以在此处div运行测试
• 1000秒 - 您可以在此处div运行测试

// 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 的示例测试