为什么jQuery中的事件绑定比原生javascript慢得多？

Question

I have put up a little JSPerf to test out performance of event bindings in Javascript. I knew that native javascript will be the fastest, but what really suprised me, by how bug margin is jQuery slower. And also a big difference between running jQuery binding on javascript object and on jQuery object.

Code I have used is below. JSPerf for this code is here .

var div = document.createElement('DIV');
var handler = function(){};
var jq_div = $('div');

// #1 - native javascript test code
div.addEventListener('click', handler);

// #2 - jquery event binding on javascript object
$(div).on('click', handler);

// #3 - jquery event binding on jquery object
jq_div.on('click', handler);

Can someone explain me why are these difference, mainly between cases #2 and #3. I wasn't expecting much difference there. And also, if there is any way how to improve jquery event binding perfomance ?

Thank you for your effort in advance.

Answer 1

Can someone explain me why are these difference

jQuery has to do everything that the native binding does - plus a huge lot of overhead that jQuery uses for its internal event system.

mainly between cases #2 and #3

Your var jq_div = $('div'); is wrong. It does select all div elements in the page and will bind events to all of them; you wanted var jq_div = $(div); or var jq_div = $('<div>'); .

Is there any way how to improve jquery event binding perfomance?

No. And there's absolutely no need. Binding (in contrast to "firing") an event happens almost never in an application - it's a very rare task. And as your jsperf test confirms, it still is happening thousands of times per second, which is fast enough. If you really find yourself needing to bind events to very many elements at a time, use event delegation.