How to measure the performance advantage arising due to Jquery event delegation?

Question

My webpage has a grid which contains 500 rows and 30 columns. Each cell is either a dropdown or a textbox. As of now, we are attaching 'change' events to each of these elements individually.

Recently, I learnt that JQuery event delegation using 'on' method can improve performance. t

I created two prototypes one with event delegation and one without it.

Without event delegation:

http://jsfiddle.net/djaoru53/

$(".event").click(function(){
    alert("click");
});

With event delegation:

http://jsfiddle.net/15cswkq7/

$("#test").on("click",".event", function(){
    alert("click");
});

How should I measure the performance improvement that I get on my webpage by using event delegation?

What tools can I use and what should I measure?

Answer 1

Jslitmus a good tool to measure performance

Well actually You can do same in a firebug also read full conversation here

Speed tracer is also a good tool.

Here's one good article also