jquery - JavaScript event listener performance for hundreds of DOM elements - Stack Overflow

admin管理员组

文章数量:1406937

I have a <ul> that has many children (close to 3000 items) and some of the <li>s have many levels. I've attached an event listener on 'click' (I'm using jQuery) which I use to toggle the visibility of the children of an <li>.

I'm wondering how having so many event listeners impacts performance. (There are at the very least 1000!). Is this a big issue for performance?

I'm not really seeing much of an issue performance wise with newer web browsers, but IE8 seems to be very slow. Is it madly irresponsible to just whack an event listener on everything?!

I have a <ul> that has many children (close to 3000 items) and some of the <li>s have many levels. I've attached an event listener on 'click' (I'm using jQuery) which I use to toggle the visibility of the children of an <li>.

I'm wondering how having so many event listeners impacts performance. (There are at the very least 1000!). Is this a big issue for performance?

I'm not really seeing much of an issue performance wise with newer web browsers, but IE8 seems to be very slow. Is it madly irresponsible to just whack an event listener on everything?!

• javascript
• jquery
• performance

Share Improve this question Follow asked Jul 24, 2013 at 18:02 Richard SweeneyRichard Sweeney 78011 gold badge1414 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

The answer is a big whooping YES. Yes, it will affect performance. Event delegation was built for this exact thing. Instead of binding your handler to every single li, bind it to its parent, the ul. This way the ul will delegate the click event to li.

$("ul").on("click", "li", function () {
 //your code
});

本文标签： jqueryJavaScript event listener performance for hundreds of DOM elementsStack Overflow