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

问题

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();');

回答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.

回答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.

回答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.

回答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
});

回答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.)

来源：https://stackoverflow.com/questions/2734848/jquery-is-element-clickfunc-or-element-attronclick-func-more-efficien

标签

javascript

onclick

jquery