여러 이벤트 핸들러에 루프에서 인수를 올바르게 전달하는 방법은 무엇입니까?

Question

가능한 중복 :이 같은 JS 내 웹 사이트에 여러하는 HREF에 이벤트 처리기를 추가
Javascript closure inside loops - simple practical example

:

function addButtonListener(){ 
    var buttons = document.getElementsByClassName("selLink"); 
    for (var i = 0; i < buttons.length; i++) 
    { 
     button.addEventListener('click',function() { addTosel(i); },true); 
    } 
    } 
} 

그러나 불행하게도 addTosel에 마지막 전달됩니다 나는 루프에서 나 ​​아니야. 이 순간에 처리되는 객체에 따라 i를 전달하는 방법은 무엇입니까?

Answer 1

당신은 클로저를 만들 필요가 :

function addButtonListener(){ 
    var buttons = document.getElementsByClassName("selLink"); 

    for (var i = 0; i < buttons.length; i++) { 

     button.addEventListener('click', function(index) { 
      return function() { 
       addTosel(index); 
      }; 
     }(i), true); 
    } 
} 

핸들러의 범위가 i의 적절한 컨텍스트에 바인딩이 방법을.

이 주제에 대한 자세한 내용은 article을 참조하십시오.

Answer 2

변수를 선언 할 때 함수에 i 변수를 바인딩해야합니다. 그래서

for (var i = 0; i < buttons.length; i++) { 
    button.addEventListener('click',(function() { addTosel(this); }).bind(i) ,true); 
} 

주 같은 : 완벽하지 않을 수 있지만, 모양 등 크로스 브라우저 심으로, 적절한 방식으로 참조 할 수 있도록, 즉 당신이 필요로하고있는 sulution 그래서 난 그냥 메모리에서 코드를 작성 에서 :

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Answer 3

당신이 .bind 접근을 위하여려고하는 경우에,이 같은 해.

for (var i = 0; i < buttons.length; i++) { 
    button.addEventListener('click', addTosel.bind(null, i), true); 
} 

이이 기능이 필요로하지 않는 것 때문에 this 값으로 바인딩 null와 새로운 기능을 만들고, 첫 번째 인수로 구속 현재 i.

또는 자신의 바인더 기능

var _slice = Array.prototype.slice; 
function _binder(func, ctx /*, arg1, argn */) { 
    var bound_args = _slice.call(arguments, 2); 
    return function() { 
     return func.apply(ctx, bound_args.concat(_slice.call(arguments))); 
    } 
} 

확인하고이 작업을 수행.

for (var i = 0; i < buttons.length; i++) { 
    button.addEventListener('click', _binder(addTosel, null, i), true); 
}