I'm trying to find the most productive way to hanging event.
Lets imagine we have this structure:
<ul>
<li> 1st li </li>
...
<li> 99999th li </li>
<ul>
So, we have about 10000 li elements and we want to add event listener to all this elements, lets say we can use jQuery too.
First thought
<li onclick="console.log(this)" >...</li>
bad part of this solution - we have increase a size of html markup because always repeating onlick.
Second thought
$('ul li').on('click', function(){
console.log(this)
})
Of course this solution is not an option because we add 10000 event listeners, obviously not good for performance.
Third thought, event delegation
$('ul').on('click', 'li', function(){
console.log(this)
})
looks really good as for me, we use only one event listener, not trashed html markup and it works as we need.
So, I asking this question, because sometimes I look at the source of different sites and big part of them use first way. Why? First way has some advantages?
I guess that maybe because it is easier to catch a dynamically added elements to the page, but may be there is something I do not know?
I'm trying to find the most productive way to hanging event.
Lets imagine we have this structure:
<ul>
<li> 1st li </li>
...
<li> 99999th li </li>
<ul>
So, we have about 10000 li elements and we want to add event listener to all this elements, lets say we can use jQuery too.
First thought
<li onclick="console.log(this)" >...</li>
bad part of this solution - we have increase a size of html markup because always repeating onlick.
Second thought
$('ul li').on('click', function(){
console.log(this)
})
Of course this solution is not an option because we add 10000 event listeners, obviously not good for performance.
Third thought, event delegation
$('ul').on('click', 'li', function(){
console.log(this)
})
looks really good as for me, we use only one event listener, not trashed html markup and it works as we need.
So, I asking this question, because sometimes I look at the source of different sites and big part of them use first way. Why? First way has some advantages?
I guess that maybe because it is easier to catch a dynamically added elements to the page, but may be there is something I do not know?
Share Improve this question edited Oct 26, 2019 at 11:56 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 22, 2013 at 21:03 DenisDenis 2,4695 gold badges35 silver badges61 bronze badges 3- What about 1 event listener on <ul>? – Brian Commented Jun 22, 2013 at 21:07
- I think the best way might be to use <body> as your base tag for the .on statement - that way you have only one watcher, and not a bunch for every ul. What do you think? – Christian Stewart Commented Jun 24, 2013 at 1:40
- sure, if you have only one <ul> on the page :) what about a lot of different ul's for the various purposes on the same page, where you have to add own listeners to each of them? – Denis Commented Jun 24, 2013 at 20:11
2 Answers
Reset to default 5I wouldn't look at "big sites" for the best web development practices. The first way has really no advantages over the other two, as it mixes JavaScript with HTML and is harder to maintain.
Event delegation will be lighter than the other two and will have the advantage of being able to handle dynamically generated elements, so in this case, it'd probably be the best choice. I would profile your application with both approaches before choosing.
you can find your answer here- jQuery.click() vs onClick ,
As you can see http://jsperf./testper test, event delegation approach is the best approach for event hanging.In your case where you have 10000 or more events than surely 3rd approach is best for you.