Detailed explanation of the solution to the problem of nesting a click event in the JavaScript for loop

This article mainly introduces the solution of nesting a click event in for loop of JavaScript to pop up multiple identical values ​​at once, which has a good reference value. Let's take a look at it with the editor

First look at the following piece of code:

for(var i=0; i<10; i++) {
 $(&#39;#ul&#39;).bind(&#39;click&#39;, function() {
  alert(i)
 })
}

For this code, when you click on the element with the ID of "ul", a pop-up will appear. 10 out of 10. Why do 10 10s pop up?

First of all, the click event in this code is not a binding event, but a binding event of jQuery, so there is a difference between binding events and ordinary events. In a normal event, if multiple click events are added to an element, the last one will overwrite all the previous click events, and only the last click event can be executed; in a binding event, it is different. On the same element, no matter how many click events are bound, they will all be executed. In other words, onclick in ordinary events only supports a single event and will be overwritten by other onclick events, while the click event in event binding can add multiple events without worrying about being overwritten. So, it is conceivable that when you click on the element with the ID "ul", 10 pop-up windows will definitely pop up.

If you still don’t understand it, it will be easy to understand after transforming the code.

In fact, the above code can be transformed into the following form:

// i=0时
$('#ul').bind('click', function() {
  alert(i)
 })
// i=1时
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
// i=10时
$('#ul').bind('click', function() {
  alert(i)
 })

Extension: The following code is a comparison of the above original code to further illustrate common events The difference with event binding

for(var i=0; i<10; i++) {
 document.getElementById(&#39;ul&#39;).onclick = function() {
  alert(i)
 }
}

Run result: a 10 pops up

Obviously, when the click event is triggered, 10 pop-up windows will pop up. So, you may have questions? Why is it 10 times 10? Shouldn't it be 0, 1, 2, 3...10? In order to solve this doubt, the original code can be transformed again:

var i=0
 
$('#ul').bind('click', function() {
  alert(i)
 })
i=1
$('#ul').bind('click', function() {
  alert(i)
 })
 
......
 
i = 9
$('#ul').bind('click', function() {
  alert(i)
 })

After the original code is transformed into this, it is obvious that the final value of i is 9, but according to the principle of the for loop, when the loop reaches i After 9, i++ will be executed, and then it will be judged that i<10. At this time, the condition is no longer met, so the loop is terminated, and the final i value is 10. Then it is natural to understand why the final result is 10 pop-up windows with a result of 10.

Summary: This code seems simple, but it covers many knowledge points such as event binding, ordinary events, and for loops.

The above is the detailed content of Detailed explanation of the solution to the problem of nesting a click event in the JavaScript for loop. For more information, please follow other related articles on the PHP Chinese website!