JavaScript event listener performance for hundreds of DOM elements

Question

I have a <ul> that has many children (about 3,000 items), and some of the <li> have many levels. I hooked the event listener to 'click' (I use jQuery), which I use to switch the visibility of the child <li> elements.

I am wondering how so many event listeners affect performance. (There are at least 1000!). Is this a big issue for performance?

In fact, I do not see more of a performance problem with newer web browsers, but IE8 seems very slow. Is it really insanely irresponsible to simply hit the listener of events at all ?!

Answer 1

The answer is a big critical YES . Yes, it will affect performance . A delegation of events was built for this purpose. Instead of binding your handler to each li attach it to its parent ul . So ul will pass the click event to li .

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