JavaScript for 루프에 클릭 이벤트를 중첩하는 문제에 대한 자세한 설명

이 글에서는 JavaScript의 for 루프에 클릭 이벤트를 중첩하여 여러 개의 동일한 값을 한 번에 팝업하는 솔루션을 주로 소개하며 이는 좋은 참조 값을 갖습니다. 아래 편집기로 살펴보겠습니다

먼저 다음 코드 조각을 살펴보세요.

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

이 코드 조각의 경우 ID가 있는 요소를 클릭하면 "ul"을 입력하면 10번 중 10번 팝업이 나타납니다. 왜 10 10이 나타나는 걸까요?

먼저 이 코드의 클릭 이벤트는 바인딩 이벤트가 아니고 jQuery의 바인딩 이벤트이므로 바인딩 이벤트와 일반 이벤트의 차이가 있습니다. 일반적인 이벤트에서 여러 개의 클릭 이벤트가 요소에 추가되면 마지막 클릭 이벤트가 이전 클릭 이벤트를 모두 덮어쓰게 되며 바인딩 이벤트에서는 마지막 클릭 이벤트만 실행될 수 있습니다. 이벤트가 동일한 요소에 바인딩되어 있으면 모두 실행됩니다. 즉, 일반 이벤트의 onclick은 단일 이벤트만 지원하고 다른 onclick 이벤트에 의해 덮어쓰이는 반면, 이벤트 바인딩의 click 이벤트는 덮어쓸 걱정 없이 여러 이벤트를 추가할 수 있습니다. 따라서 ID가 "ul"인 요소를 클릭하면 10개의 팝업 창이 팝업되는 것을 상상할 수 있습니다.

아직 이해가 안 되신다면 코드를 변환해 보시면 이해하기 쉬우실 겁니다.

사실 위 코드는 다음과 같은 형태로 변형될 수 있습니다:

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

확장: 다음 코드는 일반적인 이벤트를 더 자세히 설명하기 위해 위의 원본 코드를 비교한 것입니다. 차이점 이벤트 바인딩

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

실행 결과: 10개 팝업

분명히 클릭 이벤트가 발생하면 10개의 팝업 창이 나타납니다. 질문이 있으신가요? 왜 10 곱하기 10 인가요? 0, 1, 2, 3...10이어야 하지 않나요? 이 의심을 해결하기 위해 원래 코드를 다시 변환할 수 있습니다:

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)
 })

원래 코드를 이렇게 변환한 후 i의 최종 값은 9인 것이 분명하지만 다음의 원리에 따르면 for 루프에서 i가 9 이후에 도달하면 i++가 실행되며 이때 더 이상 조건이 만족되지 않으므로 루프가 종료되고 최종 i값은 다음과 같다. 10. 그렇다면 왜 최종 결과가 10이라는 결과가 나오는 10개의 팝업창인지 이해하는 것은 당연합니다.

요약: 이 코드는 간단해 보이지만 이벤트 바인딩, 일반 이벤트, for 루프 등 많은 지식 포인트를 다루고 있습니다.

위 내용은 JavaScript for 루프에 클릭 이벤트를 중첩하는 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!