Question

So, let’s say I have a large set of elements to which I want to attach event listeners. E.g. a table where I want each row to turn red when clicked.

So my question is which of these is the fastest, and which uses the least memory. I understand that it’s (usually) a tradeoff, so I would like to know my best options for each.

Using the table example, let’s say there’s a list of all the row elements, “rowList”:

Option 1:

for(var r in rowList){
     rowList[r].onclick = function(){ this.style.backgroundColor = "red" };
}

My gut feeling is that this is the fastest, since there is one less pointer call, but the most memory intensive, since each rowlist will have its own copy of the function, which might get serious if the onclick function is large.

Option 2:

function turnRed(){
     this.style.backgroundColor = "red";
}
for(var r in rowList){
     rowList[r].onclick = turnRed;
}

I’m guessing this is going to be only a teensy bit slower than the one above (oh no, one more pointer dereference!) but a lot less memory intensive, since the browser only needs to keep track of one copy of the function.

Option 3:

var turnRed = function(){
     this.style.backgroundColor = "red";
}
for(var r in rowList){
     rowList[r].onclick = turnRed;
}

I assume this is the same as option 2, but I just wanted to throw it out there. For those wondering what the difference between this and option 2 is: JavaScript differences defining a function

Bonus Section: Jquery

Same question with:

$('tr').click(function(){this.style.backgroundColor = "red"});

Versus:

function turnRed(){this.style.backgroundColor = "red"};
$('tr').click(turnRed);

And:

var turnRed = function(){this.style.backgroundColor = "red"};
$('tr').click(turnRed);

Answer 1

Here’s your answer:

http://jsperf.com/function-assignment

Option 2 is way faster and uses less memory. The reason is that Option 1 creates a new function object for every iteration of the loop.