jQuery: is element.click(func) or element.attr('onclick','func()') more efficient?

Question

I'm populating a list by cloning elements into it. Then I change attrs to make each item unique. They need to call a function on click, so I'm wondering if it's more efficient to use new_element.click(func); or new_element.attr('onlick','func();');

Answer 1

new_element.attr('onclick','func();');

Is:

• inefficient (needlessly creating a new inline function from a string, that does nothing except call func and lose the this reference);

• aggravating to put any complex code in, since it all has to be JS string escaped;

• broken in IE, due to bugs in setAttribute .

Avoid. click() / bind('click') is there for a reason.

Answer 2

onclick has a number of limitations, including cluttering the DOM and only allowing one function at a time. So you should use click. See Quirks Mode for more information.

Answer 3

Directly referencing the function will be more efficient than having to interpret a string.

The lowest touch way of doing this, however, is this way:

$(links_selector).live('click', func);

links_selector will presumably be something like ul.listClass a.actionClass . This will not require anything to be done when new list elements get added.

Answer 4

Since you are using jQuery then make it this way

new_element.click(function(){
    // your code
});

or you can bind the click event handler like

new_element.bind("click", function(){
    // your code
});

Answer 5

Any difference in performance between the two is most likely going to be negligible. You should use the one that reads better, and that's element.click . (Plus, onclick has many disadvantages, as @Matthew Flaschen mentioned.)