for 루프에서 클로저의 올바른 사용법?

나는 이벤트 함수에서 인덱스를 유지하기 위해 루프를 반복하고있는 일부 요소에 이벤트 리스너를 추가하고 있습니다.for 루프에서 클로저의 올바른 사용법?

<button>solution 1</button> 
<button>solution 2</button> 

<script> 
var buttons = document.getElementsByTagName('button'); 
for (var i = 0; i < 3; i++) { 
    var log = (function closure(number) { 
     return function() { 
      console.log(number); 
     }; 
    })(i); 

    buttons[0].addEventListener("click", log); 
} 
for (var i = 0, len = 3; i < len; i++) { 
    (function (i) { 
     var log = function() { 
       console.log(i); 
      }; 
     buttons[1].addEventListener("click", log); 
    })(i); 
} 
</script>

http://jsfiddle.net/paptd/11/

이 두 솔루션 정확하게 출력 0, 1, 2,하지만 난 어떤 내가 사용해야 하나 이유를 이해하기 위해 노력하고있어 ('잘못'은 폐쇄하지 않고 어떻게되는지보십시오).

올바른 방법은 어떤 방법을 사용합니까?

출처

2013-06-05 user1767586

대신 청취자의 백을 가진 당신은 이벤트 위임을 사용할 수 있습니다. 메모리가 적어지면 코드와 DOM 간의 연관성이 줄어들 것입니다. 하나의 이벤트 수신기 만 있으면됩니다. 예 : http://nczonline.net/blog/2009/06/30/event-delegation-in-javascript –

첫 번째는 클로저를 정의하고 함수를 반환 한 다음 해당 함수를 수신기에 할당하기 때문에 작동합니다.

클로저가 전체 루프 내용을 포함하므로 i의 값이 거기에 "잠겨"있다는 것을보다 명확하게 보여주기 때문에 두 번째 방법이 더 적합 해 보입니다.

출처

2013-06-05 12:52:56

루프의 내부에 n 동일한 기능을 생성 중입니다. 이벤트 핸들러를 반환하는라는 이름의 함수로 코드를 리팩토링해야

var buttons = document.getElementsByTagName('button'); 

function createHandler(number) { 
    return function() { 
     console.log(number); 
    }; 
} 

for (var i = 0; i < 3; i++) { 
    buttons[0].addEventListener("click", createHandler(i)); 
}

예 :http://jsfiddle.net/paptd/12/

출처

2013-06-05 12:54:27

for 루프에서 클로저의 올바른 사용법?

답변

관련 문제